box-shadow基础
各项值的解释
offset-x：必需，取值正负都可。offset-x水平阴影的位置。
offset-y：必需，取值正负都可。offset-y垂直阴影的位置。
blur:可选，只能取正值。blur-radius阴影模糊半径，0即无模糊效果，值越大阴影边缘越模糊。
spread：可选，取值正负都可。spread代表阴影的周长向四周扩展的尺寸，正值，阴影扩大，负值阴影缩小。
color:可选。阴影的颜色。如果不设置，浏览器会取默认颜色，通常是黑色，但各浏览器默认颜色有差异，建议不要省略。可以是rgb(250,0,0)，也可以是有透明值的rgba(250,0,0,0.5)。
inset:可选。关键字，将外部投影(默认outset)改为内部投影。inset 阴影在背景之上，内容之下。
image.png
image.png
效果解释
假如我写一个声明：box-shadow: 120px 80px 40px 20px #00fcfc，得到这样的效果：
image.png
box-shadow的不足之处
box-shadow是IE9出现的属性，作为老前辈，虽然很多场合挺好用的，但是它也有不足：
- 模糊比较生硬
- 无法智能阴影
所以今天引出另一个好用的CSS滤镜：drop-shadow。
drop-shadow滤镜是什么
MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/drop-shadow()
支持度：Edge 13以上
这个滤镜也是一种阴影效果，但是非常新。
与box-shadow的区别
- drop-shadow相对比较柔和。相同属性前提下，效果见下：
box-shadow效果：
image.png
drop-shadow效果：
image.png
- drop-shadow能智能识别容器内容
比如我从前写的一个气泡效果（https://www.jianshu.com/p/c17b1f4989a0），现在，前两种方式都是box-shadow，只不过箭头实现方式有所区别，第三种是drop-shadow。
第一种箭头几乎看不清，第二种又很生硬，第三种就很自然，而且drop-shadow强大之处就是智能识别元素边缘，所以drop-shadow无需在伪元素上声明，而box-shadow必须在伪元素上声明。
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.bm-overlay1 {
width: 250px;
height: 80px;
line-height: 1.6;
background-color: #fff;
box-shadow: 0 0 5px #ccc;
border-radius: 8px;
padding: 10px;
position: relative;
font-size: 0;
}
.bm-overlay1::after {
position: absolute;
content: "";
transform: rotate(45deg);
width: 16px;
height: 16px;
font-size: 0;
position: absolute;
background-color: #fff;
box-shadow: 5px 5px 5px -5px #ccc;
bottom: -8px;
left: 113.7px;
}
.bm-overlay2 {
width: 250px;
height: 80px;
line-height: 1.6;
background-color: #fff;
box-shadow: 0 0 5px #ccc;
border-radius: 8px;
padding: 10px;
position: relative;
font-size: 0;
}
.bm-overlay2::before {
position: absolute;
content: "";
width: 0;
height: 0;
font-size: 0;
position: absolute;
transform: rotate(45deg);
border-width: 8px;
border-style: solid dashed dashed;
border-color: transparent #fff #fff transparent;
box-shadow: 1px 1px 1px #ccc;
bottom: -8px;
left: 113.7px;
}
.bm-overlay3 {
width: 250px;
height: 80px;
line-height: 1.6;
background-color: #fff;
filter: drop-shadow(0 1px 2px #ccc);
border-radius: 8px;
padding: 10px;
position: relative;
font-size: 0;
}
.bm-overlay3::before {
position: absolute;
content: "";
width: 0;
height: 0;
font-size: 0;
position: absolute;
transform: rotate(45deg);
border-width: 8px;
border-style: solid dashed dashed;
border-color: transparent #fff #fff transparent;
bottom: -8px;
left: 113.7px;
}
</style>
</head>
<body>
<div class="bm-overlay1" style="margin-bottom: 50px;"></div>
<div class="bm-overlay2" style="margin-bottom: 50px;"></div>
<div class="bm-overlay3" style="margin-bottom: 50px;"></div>
</body>
</html>
- box-shadow有内阴影，也可以叠加阴影
drop-shadow都做不到。
结论
在支持drop-shadow的浏览器上，可以视情况优先选择drop-shadow，效果通常好于box-shadow。当然，如果你是box-shadow高手，另当别论。
网友评论