- specifies how the background, padding, border, border-image, box-shadow, margin, and clip-path of an element is applied when the box for the element is fragmented.
slice : default. Box decorations are applied to the element as a whole and break at the edges of the element fragments
clone : box decorations apply to each fragment of the element as if the fragments were individual elements. Borders wrap the four edges of each fragment of the element, and backgrounds are redrawn in full for each fragment
initial : sets this property to its default value.
inherit : inherits this property from its parent element
- is used to create a reflection of an element. The value of the box-reflect property can be: below, above, left, or right.
Note: the box-reflect property is non-standard and must be written with -webkit- prefix.
CSS syntax : box-reflect: none | below | above | left | right | position offset gradient | initial | inherit;
Property values
none : default value. No reflection is displayed.
below : creates a reflection below the element.
above : creates a reflection above the element.
left : creates a reflection to the left of the element.
right : creates a reflection to the right of the element.
position offset : two value syntax: - "position" sets reflection below, above, left, or right of the element; - "offset" sets the distance to the reflection. Distance is set in px, pt, cm, etc. Default value is 0.
position offset gradient : three value syntax: - "position" sets reflection below, above, left, or right of the element; - "offset" sets the distance to the reflection. Distance is set in px, pt, cm, etc. Default value is 0; - "gradient" sets a transition for the reflection, i.e. a fading effect.
initial : sets this property to its default value.
inherit : inherits this property from its parent element
Create reflection right to the image, with 2vw distance, and gradually fading.
code:
<div>
<p>Show the reflection to the right of the image:</p>
<img id="image-1" src="../pics/smiley.png" width="300" height="300"><br>
<p id="ap-1">Create reflection below this p-tag:</p><br>
<p>Create reflection right to the image, with 2vw distance, and gradually
fading.</p>
<img id="image-2" src="../pics/search.png" alt="search" width="124" height="124">
</div>
<style>
#image-1 {-webkit-box-reflect:right;}
#ap-1{-webkit-box-reflect: below; color: red;}
#image-2{-webkit-box-reflect: right 2vw linear-gradient(to bottom, rgba(0,0,0,0.0),
rgba(0,0,0,0.4));}
</style>
It enables to cast a drop shadow from the frame of almost any element.
A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. If a "border-radius" is specified on the element with a box shadow, the box shadow takes on the same rounded corners. The "z-ordering" of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top).
h-offset : required; the horizontal offset of the shadow; a "positive value" puts the shadow on the right side of the box, a "negative value" puts the shadow on the left side of the box.
v-offset : required; the vertical offset of the shadow; a "positive value" puts the shadow below the box, a "negative value" puts the shadow above the box.
blur : optional; the blur radius; the higher the number, the more blurred the shadow will be.
spread : optional; the spread radius; a "positive value" increases the size of the shadow, a "negative value" decreases the size of the shadow.
color : optional; the color of the shadow; the default value is the text color. In Safari (on PC) the color parameter is required. If you do not specify the color, the shadow is not displayed at all.
inset : optional; changes the shadow from an outer shadow (outset) to an inner shadow.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
To attach more than one shadow to an element, add a comma-separated list of shadows.
JavaScript syntax: object.style.boxShadow="10px 20px 30px blue"
Specify a single box-shadow using two, three, or four "length" values.
If only two values are given, they are interpreted as <offset-x> and <offset-y> values. If a third value is given, it is interpreted as a <blur-radius>. If a fourth value is given, it is interpreted as a <spread-radius>.
To specify multiple shadows, provide a comma-separated list of shadows.
example: box-shadow property
box-shadow: 0.5vw 1vw:
A div element with a shadow. The first value is the horizontal offset and the second value is the vertical offset. The shadow color will be inherited from the text color.
box-shadow: 0.5vw 1vw grey:
You can also define the color of the shadow. Here the shadow color is grey.
box-shadow: 0.5w 1vw red:
A red shadow.
code:
<style>
#example11 {margin-left: 1vw; border: 0.1vw solid red; padding: 1vw; box-shadow: 0.5vw 1vw;}
#example21 {margin-left: 1vw; border: 0.1vw solid blue; padding: 1vw; box-shadow: 0.5vw 1vw grey;}
#example31 {margin-left: 1vw; border: 0.2vw solid green; padding: 1vw; box-shadow: 0.5vw 1vw red;}
</style>
<h4>box-shadow: 0.5vw 1vw:</h4>
<div id="example11">
<p class="spec">A div element with a shadow. The first value is the horizontal offset and the
second value is the vertical offset.
The shadow color will be inherited from the text color.</p>
</div>
<h4>box-shadow: 0.5vw 1vw grey:</h4>
<div id="example21">
<p class="spec">You can also define the color of the shadow. Here the shadow color is grey.</p>
</div>
<h4>box-shadow: 0.5w 1vw red:</h4>
<div id="example31">
<p class="spec">A red shadow.</p>
</div>
example: box-shadow property
internal box-shadow
You may shoot me with your words,
You may cut me with your eyes,
You may kill me with your hatefulness,
But still, like air, I'll rise.
— Maya Angelou
code:
<style>
blockquote {padding: 2vw; box-shadow: inset 0 -3vw 3vw green, 0 0 0 0.4vw gray, 1vw 1vw
3vw blue;}
</style>
<h4>internal box-shadow</h4>
<blockquote><q>You may shoot me with your words,<br/>
You may cut me with your eyes,<br/>
You may kill me with your hatefulness,<br/>
But still, like air, I'll rise.</q>
<p class="spec">& mdash; Maya Angelou</p>
</blockquote>
Width and height only apply to the content of the element:
This div has a width of 300px. But the full width is 300px + 20px (left and right border) + 60px (left and right padding) = 380px!
box-sizing: border-box:
Width and height apply to all parts of the element: content, padding and borders:
Here, the full width is 300px, no matter what!
code:
<div>
<h4>box-sizing: content-box (default):</h4>
<p>Width and height only apply to the content of the element:</p>
<div id="box-A">This div has a width of 300px. But the full width is 300px + 20px (left and right border)
+ 60px (left and right padding) = 380px!</div>
<h4>box-sizing: border-box:</h4>
<p>Width and height apply to all parts of the element: content, padding and borders:</p>
<div id="box-B">Here, the full width is 300px, no matter what!</div>
</div>
<style>
#box-A {box-sizing: content-box; width: 300px; height: 100px; padding: 30px; border: 10px solid blue;}
#box-B {box-sizing: border-box; width: 300px; height: 100px; padding: 30px; border: 10px solid blue;}
</style>
