|
|
这里有两个图片的阴影，你觉得哪个好看？
一个是使用box-shadow另一个是使用filter: drop-shadow
一、我们来了解一下CSS的filter（过滤器）
该CSS的filter属性可以实现很多效果
（一）filter: blur(5px) // 高斯模糊，值越大越模糊
（二）filter: brightness(150%) // 图片的亮度百分比，以100%为分界，100%以上越亮，100%以下越暗
（三）filter: contrast(150%) // 图片的对比度，以100%为分界，100%以上对比度越高，100%以下越低
（四）filter: grayscale(100%) // 图片的灰度，100%为完全灰色
（五）filter: opacity(60%) // 图片的透明度，100%为不透明
（六）filter: drop-shadow(4px 10px 8px gray) // 设置图片的阴影
二、我们重点了解下filter：drop-shadow()
该属性传入四个值
（一）第一个参数为<offset-x>（必填） 控制阴影的X轴位置，如果为负则向左偏移
filter: drop-shadow(8px 0px)
（二）第二个参数为<offset-y>（必填）控制阴影的Y轴位置，如果为负则向上偏移
filter: drop-shadow(8px 8px)
（三）第三个参数为<blur-radius> （可选参数）用来控制阴影的模糊度，值越大，越模糊，不允许负值，默认为0
filter: drop-shadow(8px 8px 4px)
（四）第四个参数为<color> （可选参数）用来控制阴影颜色
filter: drop-shadow(8px 8px 4px red)
总的就是：filter: drop-shadow(offset-x offset-y blur-radius color)
三、与box-shadow的区别
box-shadow: inset offset-x offset-y blur-radius spread-radius color;
与
filter: drop-shadow(offset-x offset-y blur-radius color);
（一）区别（box-shadow多了两个值）:
1.第一个为inset，该值是用于控制阴影是向内还是向外的扩散，如果有写则表示阴影向内，默认不填则向外。
box-shadow: inset 0px 0px 15px 0px #f00
2.第二个为spread-radius，该值是控制阴影的范围扩大或缩小，值越大阴影就越扩大，负值的时候收缩
box-shadow: 0px 0px 15px 5px #f00
（二）区别2（box-shadow可以添加多个阴影）:
box-shadow: 0rpx 0rpx 20rpx 30rpx rgba(12, 12, 12, 0.199),
inset 0rpx 0rpx 10rpx 10rpx rgba(12, 12, 12, .6);
（通过逗号添加第二组阴影）
四、结果
（一）drop-shadow无法向内设置阴影，还有扩大阴影范围
（二）drop-shadow不能进行阴影叠加
（三）但它能在对于不规则的元素或图片实现特殊阴影，以下是不规则对话框的阴影实现。
（四）一些浏览器为了更好的性能会提供硬件加速
（五）兼容性不管是手机还是PC基本都是支持的
也可以添加-webkit-浏览区前缀增加兼容性。
来源：https://developer.mozilla.org/en-US/docs/Web/CSS/filter#combining_functions
（六）还有其他效果这里就不一一展示了
感谢您的支持，我会持续不断的添加更多CSS、JS以及小程序的经验分享！