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

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

2024-03-20 11:03:20 前端知识 前端哥 172 277 我要收藏

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

一个是使用box-shadow另一个是使用filter: drop-shadow

一、我们来了解一下CSS的filter(过滤器)

该CSS的filter属性可以实现很多效果

(一)filter: blur(5px) // 高斯模糊,值越大越模糊

(二)filter: brightness(150%) // 图片的亮度百分比,以100%为分界,100%以上越亮,100%以下越暗

wz2.png

(三)filter: contrast(150%) // 图片的对比度,以100%为分界,100%以上对比度越高,100%以下越低

wz3.png

(四)filter: grayscale(100%) // 图片的灰度,100%为完全灰色

wz4.png

(五)filter: opacity(60%) // 图片的透明度,100%为不透明

wz5.png

(六)filter: drop-shadow(4px 10px 8px gray) // 设置图片的阴影

wz6.png

二、我们重点了解下filter:drop-shadow()

该属性传入四个值

(一)第一个参数为<offset-x>(必填) 控制阴影的X轴位置,如果为负则向左偏移

截屏2023-02-09 12.01.14.png
filter: drop-shadow(8px 0px)

(二)第二个参数为<offset-y>(必填)控制阴影的Y轴位置,如果为负则向上偏移

截屏2023-02-09 14.23.20.png
filter: drop-shadow(8px 8px)

(三)第三个参数为<blur-radius> (可选参数)用来控制阴影的模糊度,值越大,越模糊,不允许负值,默认为0

截屏2023-02-09 14.32.22.png
filter: drop-shadow(8px 8px 4px)

(四)第四个参数为<color> (可选参数)用来控制阴影颜色

截屏2023-02-09 14.37.16.png
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,该值是用于控制阴影是向内还是向外的扩散,如果有写则表示阴影向内,默认不填则向外。

截屏2023-02-09 15.49.00.png
box-shadow: inset 0px 0px 15px 0px #f00

2.第二个为spread-radius,该值是控制阴影的范围扩大或缩小,值越大阴影就越扩大,负值的时候收缩


box-shadow: 0px 0px 15px 5px #f00

(二)区别2(box-shadow可以添加多个阴影):

截屏2023-02-12 14.49.35.png
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不能进行阴影叠加

(三)但它能在对于不规则的元素或图片实现特殊阴影,以下是不规则对话框的阴影实现。

截屏2023-02-12 14.53.16.png

(四)一些浏览器为了更好的性能会提供硬件加速

(五)兼容性不管是手机还是PC基本都是支持的

截屏2023-02-09 20.33.25.png

也可以添加-webkit-浏览区前缀增加兼容性。

来源:https://developer.mozilla.org/en-US/docs/Web/CSS/filter#combining_functions

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

截屏2023-02-09 20.37.00.png

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3960.html
标签
评论
发布的文章

JQuery操作DOM

2024-04-13 23:04:28

jQuery库

2024-04-13 23:04:28

【无标题】

2024-04-13 23:04:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!