|
|
这里有两个图片的阴影,你觉得哪个好看?
一个是使用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以及小程序的经验分享!