一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

盒子阴影box-shadow

今年北京2022冬奥的冰dd不是挺火的嘛，然后我看到有人用HTML+CSS画了一个冰墩墩ヾ(≧▽≦*)o 当时就被震撼到了，简直了！然后我就要了他的源码来研究，发现都是很常规的东西，最后拼出来一个冰dd

冰dd

上面这个是代码所呈现出来的效果图(放图不过审核(lll￢ω￢)),仔细看就会发现,就是各种盒子的定位拼接
我当时比较在意的是这个脸的这一圈要怎么去实现它，原作者的代码是这样写的:

        .face {
                width: 73%;
                height: 120px;
                border: 3px solid #000;
                border-radius: 50%;
                position: relative;
                margin: 24px auto;
                box-shadow: 0 0 0 2px #b7f2ff,0 0 0 4px #f52dd6, 0 0 0 7px #f4df74,0 0 0 8px #000;
            }

当时是我第一次见到盒子阴影的这种写法，原谅我孤陋寡闻，😄

box-shadow语法

CSS3中新增盒子阴影，即box-shadow属性
语法如下：
box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow: 必需属性。水平阴影的位置。允许负值
v-shadow: 必需属性。垂直阴影的位置。允许负值
blur: 可选。模糊距离(就是影子的虚实)
spread: 可选。阴影的尺寸（影子的大小）
color: 可选。阴影的颜色
insert: 可选。将外部阴影（outset）改为内部阴影。

注意！！！
1.默认的是外阴影（outset），但是不能把这个单词写上去，写上去的话，整个影子就失效了。 2.盒子阴影不占空间，不影响其他盒子的排列

同时设置了border-radius和box-shadow的情况

如果元素同时指定了border-radius属性，则阴影呈现相同的圆角
经典例子

可见：

border-radius会以相同的作用影响阴影外形
border-image,padding不会影响阴影的任何外形
阴影box和box模型一样
外阴影在对象背景之下，内阴影在背景之上。
层次：内容>内阴影>背景图片>背景颜色>外阴影

阴影和布局

阴影不影响布局，但是可能会覆盖其他box或者其他box的阴影。

阴影不触发滚动条，也不增加滚动区域的大小。

所以布局时可忽略阴影。

多个阴影

如果一个元素使用了多个阴影，多个阴影之间用逗号分隔。先写的层级更高，前面的会覆盖后面的。一个box有多重阴影时，需要注意顺序：多个阴影从上往下分布，第一个阴影在最顶层。