Preface
Speaking of box-shadow, the first idea is of course to achieve shadows. In fact, it can also be used to achieve other fun effects. This article intends to talk about those things about box-shadow.
See the effect without saying anything
3D ball
<style type="text/css">
.ball{
background: rgba(100,100,100,0.2);
width: 100px;
height: 100px;
padding: 10px;
border-radius: 50%;
box-shadow: -14px 8px 100px #333 inset,
0 0 2px #888,
3px -1px 4px #444;
}
</style>
<div class="ball"></div>
Paper shadow (from @张鑫旭老师)
<style type="text/css">
.curved_box {
display: inline-block;
*display: inline;
width: 200px;
height: 248px;
margin: 20px;
background-color: #fff;
border: 1px solid #eee;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
position: relative;
*zoom: 1;
}
.curved_box:before {
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg);
left: 15px;
}
.curved_box:after {
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg);
right: 15px;
}
.curved_box:before, .curved_box:after {
width: 70%;
height: 55%;
content: ' ';
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
position: absolute;
bottom: 10px;
z-index: -1;
}
</style>
<div class="curved_box"></div>Peruse attributes
Seeing the gorgeous effect above, can't wait to figure out the box-shadow? Let's decrypt it step by step!
Overview of attribute syntax
box-shadow: none | <shadow>[,<shadow>]*
The default value is none
<shadow>:inset? && <length>{2,4} && <color>?
shadow pattern, the default is outset, that is, outer box-shadow is used. When set to inset, inner box-shadow is used.
horizontal offset, the horizontal offset of the shadow from the original position, a positive number means moving to the right, a negative number means moving to the left.
vertical offset, the vertical displacement of the shadow from the original position, a positive number means downward movement, and a negative number means upward movement.
blur radius, the default value is 0, the shadow blur radius.
Spread distance, the default value is 0, expand or reduce the effective area of the shadow.
<color>, the shadow color, the default is the same as the color attribute.
Note: We can set multiple shadows at the same time, and the z-index value of the shadow decreases from left to right.
How to play outer box-shadow and inner box-shadow?
By default, outer box-shadow is used. When the inset keyword is added to box-shadow, inner box-shadow is used. But what is the effect of the two?
<style type="text/css">
.box{
float: left;
background: #888;
width: 100px;
height: 100px;
margin-right: 20px;
}
.outer-box-shadow{
box-shadow: 10px 10px #F00;
}
.inner-box-shadow{
box-shadow: 10px 10px #F00 inset;
}
</style>
<div class="box outer-box-shadow"></div>
<div class="box inner-box-shadow"></div>
</div>outer-box-shadow
Features: The shadow falls outside the border box of the element.
Implementation principle:
-
Create a shadow box with the same size as the border box of the element;
-
Position the shadow box to coincide with the border box of the element and below the element;
-
Move relative to the original position according to horizontal offset and vertical offset;
-
Scale the size of the shadow box according to the spread distance (will affect the displacement of the box);
-
Process the shadow box according to the blur radius;
- Finally, cut off the overlap between the shadow box and the element border box.
<style type="text/css">
.box{
background: #888;
width: 100px;
height: 100px;
}
.outer-box-shadow{
box-shadow: 90px 10px #F00;
}
</style>
<div class="box outer-box-shadow"></div>
</div>
Simulate it:
<style type="text/css">
.box{
position: relative;
}
.box-shadow{
position: absolute;
z-index: -1;
background: #F00;
width: 100px;
height: 100px;
left: 20px;
top: 20px;
}
.box-content{
background: #888;
width: 100px;
height: 100px;
}
</style>
<div class="box">
<div class="box-shadow"></div>
<div class="box-content"></div>
</div>inner-box-shadow
Features: The shadow falls within the padding box of the element.
Realization principle (pure personal understanding):
-
Create a shadow box with the same size as the padding box of the element;
-
Position the shadow box to coincide with the padding box of the element and above the element;
-
Draw two lines each horizontally and vertically, which coincide with the element padding edge; (a total of 4 lines are respectively marked as left/top/right/bottom-guideline)
-
Move left/top/right/bottom-guideline according to horizontal offset and vertical offset.
-
Move 4 lines according to the spread distance. When the spread distance is positive, the left-guideline moves to the right, the top-guideline moves down, the right-guideline moves to the left, and the bottom-guideline moves up; when the spread distance is negative, the opposite is true.
-
According to the blur radius, the area between each padding edge of the processing element and its corresponding guideline.
-
Tailor the shadow box
-
Cut off the part that does not overlap the element padding box;
- Only the area between each padding edge of the element and its corresponding guideline is displayed.
<style type="text/css">
.box{
float: left;
background: #888;
width: 100px;
height: 100px;
margin-right: 10px;
}
.box1{
box-shadow: 0 0 0 20px red inset;
}
.box2{
box-shadow: 10px 0 0 20px red inset;
}
.box3{
box-shadow: 10px 0 10px 20px red inset;
}
.box4{
box-shadow: 0 0 10px 50px red inset;
}
</style>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
Simulate it:
<style type="text/css">
.box-shadow{
position: relative;
display: inline-block;
background: red;
overflow: hidden;
}
.bg{
position: absolute;
background: #888;
left: 30px;
right: 10px;
top: 20px;
bottom: 20px;
}
.content{
position: relative;
z-index: 1;
width: 80px;
height: 80px;
padding: 20px;
}
</style>
<div class="box-shadow">
<div class="bg"></div>
<div class="content"></div>
</div>By blur radius
The W3C spec does not specify which method browser vendors use to achieve the blur effect, anyway, the effect is almost the same as the Gaussian blur effect. But one thing we need to pay attention to is that the blur effect will expand the area of the shadow.
<style type="text/css">
.outline{
border: 1px solid red;
margin: 40px 0;
}
.s{
background: rgba(255, 100, 100, 0.1);
width: 100px;
height: 100px;
}
.s1{
box-shadow: 110px 0 0 #333;
}
.s2{
box-shadow: 110px 0 20px #333;
}
.s3{
box-shadow: 110px 0 40px #333;
}
</style>
<div class="outline">
<div class="s s1">sample1</div>
</div>
<div class="outline">
<div class="s s2">sample2</div>
</div>
<div class="outline">
<div class="s s3">sample3</div>
</div>
sample1 is the effect of blur radius being 0, you can see that the shadow size is exactly the same as the element size. And sample2 is the effect of blur radius of 20px, you can see that the shadow size has been expanded, while sample3 has expanded more.
Now we perceptually realize that the shadow size will be expanded when the blur radius value is greater than 0, so how much is the expansion? Then we need to clarify the starting position of the blur.
1. For outer-shadow-box, the starting position for blurring is each side of the shadow box;
2. For inner-shadow-box, the starting position for blurring is each guideline.
Then the blur effect is from the location where it occurs, for the horizontal side or guideline, it diverges to the vertical direction, and for the vertical side or guideline, it diverges to the horizontal direction, and the divergence distance is the same.
The divergence distance is the same, so the divergence in each direction is a distance of blur radius/2. See that the size of the shadow in sample3 overlaps with the element box, because the left border of the shadow box diverges by 20px to the left, exceeding the horizontal distance of 10px between them, while sample2 is just adjacent.
Scale shadow size by spread distance
If blur radius is to expand the size of the shadow in the dark, then spread distance is to blatantly scale the size of the shadow.
<style type="text/css">
.outline{
border: 1px solid red;
margin: 40px 0;
}
.s{
background: rgba(255, 100, 100, 0.1);
width: 100px;
height: 100px;
}
.s1{
box-shadow: 110px 0 0 #333;
}
.s2{
box-shadow: 110px 0 0 10px #333;
}
.s3{
box-shadow: 110px 0 0 -10px #333;
}
</style>
<div class="outline">
<div class="s s1">sample1</div>
</div>
<div class="outline">
<div class="s s2">sample2</div>
</div>
<div class="outline">
<div class="s s3">sample3</div>
</div>Do you still remember the introduction of border-top/right/bottom/left-colors in "CSS Magic Hall: Regaining Border: Deconstructing Border"? Due to compatibility issues and 1px corresponding to a color, there are few practical applications, but through outer-box-shadow and spread distance we can get a better effect and highly compatible implementation.
<style type="text/css">
.rainbow{
margin: 50px;
width: 100px;
height: 100px;
box-shadow: 0 0 0 2px rgb(255,0,0),
0 0 0 5px rgb(255,165,0),
0 0 0 8px rgb(255,255,0),
0 0 0 10px rgb(0,255,0),
0 0 0 12px rgb(0,127,255),
0 0 0 15px rgb(0,0,255),
0 0 0 20px rgb(139,0,255);
}
</style>
<div class="rainbow"></div>
Find out the z-index of each layer
In the above image, you can see the z-index order of each layer when there is no shadow. What about shadows?
1. For outer-box-shadow, its z-index is higher than the margin layer and lower than the background-color layer;
2. For inner-box-shadow, its z-index is higher than the padding layer and lower than the content layer.
Shadow position
Reposition the shadow box through horizontal/vertical offset, and scale the size of the shadow box through blur radius or spread distance, but please note that the shadow box does not affect the layout of other boxes. In fact, the shadow box is equivalent to using absolute positioning and will not occupy The space of normal flow will not affect the layout of other elements, so when only the shadow position or size is modified, only repaint will be triggered, not reflow.
Rounded or right-angled box-shadow is silly and unclear?
The shadow not only has the same default size as the element box, but also the default shape. That is, when the element box has rounded corners, the default shape of the shadow is also rounded corners. Since it is said that the default shape is consistent, that is to say, it can be inconsistent! So how is it inconsistent, let's take a look at it together!
<style type="text/css">
.s1{
background: #0EF;
width: 100px;
height: 100px;
border-radius: 10px;
box-shadow: 110px 0 0 -10px #333,
220px 0 0 0 #666,
360px 0 0 20px #888;
}
</style>
<div class="s1">sample1</div>
When spread distance is set, the value of border-radius will also change accordingly. The specific formula is border-radius + spread-distance * (1 + (border-radius / spread-distance-1)^3).
Therefore, when the spread distance is a positive number, the border-radius will increase; and when the spread distance is a negative number, the border-radius will decrease until it is 0px.
Fragmented box-shadow
When the box with box-shadow is split into multiple boxes, what will happen to the corresponding box-shadow? In fact, this is not just a box-shadow problem, for example, border, background-image, etc. will all encounter the same problem. A new feature box-decoration-break is introduced in CSS3 to set the rendering effect in the above situation.
box-decoration-break: slice | clone
Slice is the default value, which means that the border, background-image and other styles are first rendered in the state when it is not split, and then it is directly split into multiple boxes;
Clone means first split it directly into multiple boxes, and then render border, background-image and other styles one by one.
<style type="text/css">
.intro{
font-size: 14px;
line-height: 1.5;
text-indent: 1em;
width: 300px;
}
.intro span{
border: 1px solid #666;
border-radius: 5px;
box-shadow: 5px 3px 3px #AAA;
}
.slice{
-webkit-box-decoration-break: slice;
}
.clone{
-webkit-box-decoration-break: clone;
}
</style>
<p class="intro">
<span class="slice">
Hey there, welcome to be here to share something aboute CSS together:) My name is fsjohnhuang, a FE from Midea. Enjoy the evolution of FE, and feel excited in the work I'm doing now.
</span>
</p>
<p class="intro">
<span class="clone">
Hey there, welcome to be here to share something aboute CSS together:) My name is fsjohnhuang, a FE from Midea. Enjoy the evolution of FE, and feel excited in the work I'm doing now.
</span>
</p>
As you can see from the above, it is not so much that the attribute value of box-decoration-break affects the effect of box-shadow, but the attribute value of box-decoration-break affects the effect of border-radius and border on the element box, and then by The effect of the box indirectly affects the effect of the box-shadow.
compatibility
IE and Edge do not support it. FF supports the best, and the Webkit kernel needs to be prefixed with -webkit-.
For unsupported browsers, the effect is like box-decoration-break: slice
compatibility
IE9 supports box-shadow. What a gratifying news (because I only need to be compatible with IE9+ in my work and it’s OK :)). But what about IE6~8? There are many solutions, and there are also brief introductions above. @张鑫旭老师 mentioned that when simulating the blur radius effect, the following scheme is used
.ieBlock{
height:100px;
width:100px;
background:#000;
filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=10);
-ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=10)";
}
It is better than the following scheme!
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
In addition, if you want to use it in a production environment without thinking, it is better to use a mature CSS library. Please refer to
PIE makes IE support CSS3 rounded box shadows and gradient rendering
thank
-
the-box-shadow
-
break-decoration
-
CSS3 box-shadow realizes the curve projection effect of paper
-
CSS to achieve cross-browser compatibility box shadow effect
-
CSS to achieve cross-browser box-shadow box shadow effect (2)
-
PIE makes IE support CSS3 rounded box shadows and gradient rendering
- "Illustrated CSS3 Core Technology and Case Actual Combat"-3.5 CSS3 Box Shadow Properties