The principle is the same as text-shadow (text shadow effect), except that text-shadow is a shadow for text, and box-shadow is a shadow for box objects. The boxes here include block, inline, and inline-block.
If you don’t know the children’s shoes about the object of the box, you can first learn what a box is
1. The grammatical structure of box-shadow
The official document of w3c, take a look first: CSS3 box-shadow property .
box-shadow: h-shadow v-shadow blur spread color inset;
- h-shadow: The offset value of the horizontal shadow, required, can be negative.
- v-shadow: Offset value of vertical shadow, required, can be negative.
- blur: shadow blur value, optional, cannot be negative.
- spread: The spread of the shadow, optional, can be negative.
- color: The color of the shadow. Although it is optional, it is interpreted differently in different browsers. Some are black and some are transparent, so it is recommended to set both. Shadows with transparency can use rgba values.
- inset: Inner shadow. Optional, if default, the default is the outer shadow (outset).
As for the compatibility of box-shadow, the articles I write hardly consider IE. Don’t blame me for being willful, because I am just a teacher, not a designer or a siege lion. I don’t need to deal with various customers, various browsers, and various Terminal, I am the master of my site!
In human terms: I write articles just to be happy, and I don’t want IE to spoil my interest.
To be honest: I also don’t understand all kinds of messy things in various versions of IE @_@
If you accept my agreement, you are welcome to read on.
Like text-shaodw, all shadows come from a copy of the original object
Second, the application of box-shadow
First set the basic code as follows:
<div class="box">box-shadow</div>
.box{
width:100px;
height:100px;
background-color:rgba(255,204,0,.5);
border-radius:10px;
padding:10px;
margin:10px;
}
Then set different classes to combine according to needs.
<div class="box bs1">box-shadow</div>
.bs1{
box-shadow:120px 0px #ccc;}
The shadow is a copy of the original object, including the inner margin and border, which belong to the area of the box, and the shadow also includes the copy of the inner margin and border. But the shadow itself does not occupy the space of the layout.
1. Shadows with the same blur value in all directions
.bs2{
box-shadow:0 0 20px #666;}
2. Shadow with 5px extension
.bs3{
box-shadow:0 0 0 5px #333;}
The shadow does not occupy the space of the layout like the border, so to realize the outer border generated by the mouse passing of the object, the extension of the shadow can be used instead of the border.
Another method is to use the transparent implementation of the border, but it is not as convenient as the spread extension of the box-shadow. You can see the case and think about why.
If borders are used, the layout will have an impact.
3. Expand to negative shadows
.bs4{
box-shadow:0 15px 10px -15px #333;
border:none;}
Note: To produce such an effect, the value of the y-axis and the value of the spread are exactly the same and opposite. The other sides are the same principle.
4. Inner shadow
.bs5{
background-color:#1C8426;
box-shadow:0px 0px 20px #fff inset;
}
You can directly set the box-shadow box shadow for a box like div, but you cannot directly set the box shadow for an img image.
This is invalid:
/* 直接在图片上添加内阴影无效*/
.img-shadow img {
box-shadow: inset 0 0 20px red;
}
You can solve this problem by setting the inner shadow for the img's parent container div, and then setting the img's z-index to -1. However, this method cannot set the background color for the parent container, because the level of the parent container is higher than that of the picture, and setting the background color will block the picture. (I made this mistake unconsciously. I set a white background for the parent-level container, and I couldn’t see the picture. After a long time, I also asked Da Mo for advice. Da Mo is really nice. I made a demo for me. Spot your own mistakes.)
/* 在图片容器上添加内阴影，生效*/
.box-shadow {
box-shadow: inset 0 0 20px red;
}
.box-shadow img {
position: relative;
z-index: -1;
}
Of course, if you have to add a background color to the parent container, adding a translucent background color of rgba is also good.
There is also a better way, regardless of the level of the image, it can be achieved by using the :before pseudo-element, and it can also add a background color to the parent container.
/*给图片容器上添加伪元素或伪类，不用为img设置负值的z-index值了。有内阴影*/
.pseudo {
position: relative;
background-color:#FC3;
padding:5px;
}
.pseudo:before {
content:'';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: inset 0 0 40px #f00;
}
5. Multiple shadows
.bs6{
box-shadow:40px 40px rgba(26,202,221,0.5),80px 80px rgba(236,43,120,.5);
border-radius:0;}
The color value of rgba is used here. Yellow also has translucency, but the cyan shadow below cannot be seen through yellow, while cyan and the bottom pink shadow are superimposed with transparency.
It can be seen that the shadows also have a layered relationship. The shadows in the front have a higher level and will suppress the shadows in the back. The transparency between the shadow and the shadow is visible, while the transparency of the subject's box has no effect on the shadow.
There is such a picture in the css standard, which introduces the operating principle of box-shadow:
For the understanding of this picture, you can refer to a passage from Da Mo, which is very thorough:
This picture can tell us a lot of information, such as borer-radius rounded corners, shadow expansion, shadow blurring, and how padding affects object shadows: a non-zero value of border-radius will affect the shape of the shadow in the same way, but border-image does not affect any shape of the object shadow; the object shadow is the same as the layer of the box model, the outer shadow will be below the object background, and the inner shadow will be above the background below the border. So the whole hierarchy is: border>inner shadow>background image>background color>outer shadow. Because everyone knows that our background image is above the background color.
3. The difference between drop-shadow and box-shadow
1. Simulate the effect of projection
For example, use the :after and :before pseudo elements to complete the projection effect.
2. drop-shadow in filter
Box-shadow is a box shadow, and alpha transparency is not considered. Therefore, if your object has transparency, there is an obvious difference between box-shadow and drop-shadow.
.box{
width:100px;
height:100px;
border:3px dashed #000000;
border-radius:50px;
margin:20px;
}
.box-shadow{
box-shadow:10px 10px 10px #000;}
.drop-shadow{
filter:drop-shadow(2px 2px 2px #000);}
drop-shadow is the real projection.
It's a pity that the current support for this filter is not friendly enough, otherwise it would be great to use it for special styling. Such as this bubble box.
It can be seen that box-shadow does not support the shape made by the :after pseudo-element, while drop-shadow not only supports transparency well, but also supports pseudo-elements very well.
.talk{
position:relative;
width:200px;
height:100px;
background-color:#23AE1C;
border-radius:100px/50px;
}
.talk:after{
content:"";
position:absolute;
top:85px;
left:80px;
transform:rotate(30deg);
border-top:30px solid #23AE1C;
border-left:20px solid transparent;
border-right:20px solid transparent;
}
.box-shadow1{
box-shadow:2px 5px 10px #666;}
.drop-shadow1{
filter:drop-shadow(2px 5px 5px rgba(51,51,51,.8));}