我不允许你还不知道CSS的filter的drop-shadow阴影用法以及与box-shadow的区别详解

我不允许你还不知道CSS的filter的drop-shadow阴影用法以及与box-shadow的区别详解

这里有两个图片的阴影,你觉得哪个好看?

一个是使用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#***bining_functions

(六)还有其他效果这里就不一一展示了

感谢您的支持,我会持续不断的添加更多CSS、JS以及小程序的经验分享!

转载请说明出处内容投诉
CSS教程_站长资源网 » 我不允许你还不知道CSS的filter的drop-shadow阴影用法以及与box-shadow的区别详解

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买