基本参数设置
-
none：是默认值，表示没阴影。设置为none后下面的参数都没有任何意义。 -
inset：内阴影，改参数可选，不设的话默认是外阴影。 -
x-offset / y-offset：必须的参数。水平和垂直阴影的偏移量。正值表示往x轴y轴正方向偏移（即往右往下）。负值反过来往x轴y轴反方向偏移（即往左往上）。 -
blur-radius：阴影模糊半径。改参数可选，值为0表示不模糊，值越大，阴影的边缘就越模糊。值不能为负数。 -
spread-radius：阴影扩展半径。改参数可选，正值表示阴影扩展，负值表示阴影缩小。 -
color：阴影颜色，改参数可选，不设就取浏览器的默认色。各浏览器的默认色不同。
完整的语法：box-shadow:[inset x-offset y-offset blur-radius spread-radius color]++代表可以设置多个阴影。
示例：
- 先设置
x-offset和y-offset和color的值，其他的不设置。
div {
width: 150px;
height: 50px;
border: 1px solid #b9b9b9;
box-shadow: 10px 10px purple;
border-radius: 10px;
}
1.png
- 加上不同值的
blur-radius。
图一 10px；图二 30px；图三 50px。
3.png
4.png
5.png
可以看到，加了blur-radius模糊半径后，原本的实体阴影往外扩展了，尤其是blur-radius的值设成50px之后。
阴影扩散的原因：
当浏览器读取到上面的box-shadow: 10px 10px 50px purple;后，浏览器会分四步来实现阴影效果。
- 根据指定的
color克隆一个和原始元素同样尺寸的元素。 - 之后根据指定的
x-offset / y-offset将克隆出来的元素进行偏移。 - 第三步根据指定的
blur-radius模糊半径10px，根据高斯算法进行模糊处理。本质上是在阴影边缘将阴影色和纯透明之间的颜色过滤，长度近似于blur-radius模糊半径的两倍，即20px左右。这就是导致阴影外扩的原因。 - 最后，浏览器在克隆元素上，将交集的部分剪切掉，剩余的部分拼接到原始元素边上，就实现了最终的效果。这意味着即使你将原始元素的背景设成半透明，也不会看到底层克隆的元素。因为原始元素下面根本没有东西。
- 如果想限制模糊半径的范围，如单边模糊时，你就需要加上
spread-radius阴影扩展半径。第一张图片虽然只设置了box-shadow: 0 10px 20px purple;，但是阴影外扩导致都出现了阴影，第二张图片，box-shadow: 0 10px 20px -10px purple;,通过spread-radius负值让阴影缩小。会把上下高度和左右宽度都缩小10px；即宽高均缩小20px。
a.png
b.png - 如果
blur-radius为0时（表示不模糊阴影），只有spread-radius时，效果相当于border。但这不是真正的border,盒子模型在计算宽高时不会被计算在内，因此文字hello和阴影重叠了，如果是真的border不会重叠。
c.png - 阴影默认都是外阴影，可以设置
inset设置成内阴影。
box-shadow: inset 20px 20px 20px -10px purple;
e.png -
但是给图片加上内阴影没有效果。
f.png
内阴影已经有了，只是被遮盖住了而已。解决办法
- 方案一：将子元素的
img层级降低，所以先将其设成relative再设z-index为-1.
.ct{
border: 1px solid #b9b9b9;
box-shadow: inset 20px 20px purple;
border-radius: 10px;
display: inline-block;
}
.ct>img {
position: relative;
z-index: -1;
}
- 方案二：将子元素
img改成父元素div的background-img，所以先给div定宽高，再设background-img。
.ct{
width: 200px;
height: 200px;
background-image: url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2249893882,1165836821&fm=27&gp=0.jpgf");
border: 1px solid #b9b9b9;
box-shadow: inset 20px 20px purple;
border-radius: 10px;
display: inline-block;
}
box-shadow的层级关系从高到低依次是：border > 内阴影 > background-image > background-color > 外阴影。
多层阴影
- 还可以设置多层阴影，用逗号隔开。实现方式就是两个0偏移量和0模糊值，加上正值的扩展半径。
.ct{
width: 200px;
height: 200px;
border: 2px solid red;
box-shadow: 0 0 0 2px orange,
0 0 0 4px yellow,
0 0 0 6px green,
0 0 0 8px #6cc;
0 0 0 10px blue,
0 0 0 12px #969;
}
- 多层阴影的一个常见的列子既是实现两侧阴影。
.ct{
width: 200px;
height: 200px;
box-shadow: 6px 0 10px -10px red,
-6px 0 10px -10px red;
}
g.png
单边不均匀的阴影：
单边不均匀的阴影不是仅靠box-shadow属性就能实现的，还需要配合图层覆盖和部分动画（如旋转）。
body {
background: #eee;
}
.box {
width: 200px;
height: 200px;
background: #fff;
margin: 10px;
line-height: 100px;
text-align: center;
position: relative;
}
- 第一步：先给
div加上::before和::after两个伪元素，内容为空，只需要伪元素的躯壳，并不想让伪元素显示出来。（伪元素里面的红色border是为了看起来更清晰，最后会被删掉。）
.effect::before,.effect::after {
content: '';
border: 1px solid red;
width: 50%;
}
- 第二步：为两个伪元素增加
absolute定位，通过left和top为absolute元素定位，通过bottom拉伸absolute元素。
.effect::before,.effect::after {
content: '';
border: 1px solid red;
width: 50%;
position: absolute;
left: 10px;
top: 80%;
bottom: 15px;
}
- 第三步： 定位后的
::before和::after两个伪元素完全重合在一起了，因此在第三步中为::after指定right位置将他们分开。
.effect::after {
right: 10px;
left: auto;
}
- 第四步：让他们稍微旋转一点角度，并加上阴影。
.effect::before,.effect::after {
content: '';
border: 1px solid red;
width: 50%;
position: absolute;
left: 10px;
top: 80%;
bottom: 15px;
transform: rotate(-5deg);
box-shadow: 0 15px 10px #777;
}
.effect::after {
transform:rotate(5deg)
right: 10px;
left: auto;
}
- 最后一步设置
z-index:-1将伪元素隐藏掉。
.effect::before,.effect::after {
content: '';
border: 1px solid red;
width: 50%;
position: absolute;
left: 10px;
top: 80%;
bottom: 15px;
transform: rotate(-5deg);
box-shadow: 0 15px 10px #777;
z-index: -1;
}
