学透CSS-box-shadow你真的会吗?

781

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,邀你进群,一起学习交流前端,成为更优秀的工程师~关注公众号:半夏话前端,了解更多前端知识!点我探索新世界!

兼容性

box-shadow 基本兼容市面上的大部分浏览器,所以不需要考虑兼容性。

是什么

box-shadow可以在元素上添加阴影,一个元素可以添加多个阴影。

语法

box-shadow:offset-x offset-y blur spread color position(可选)

offset-x

指定阴影的水平偏移量。即在x轴上阴影的位置。正值使阴影出现在元素的右边,而负值使阴影出现在元素的左边。

offset-y

指定阴影的垂直偏移量。即在y轴上阴影的位置。正值使阴影出现在元素的下边,而负值使阴影出现在元素的上边。

blur

指定阴影的模糊程度,值越大越模糊。

spred

指定阴影的延伸尺寸,值越大,增加的越多。

color

指定了阴影的颜色

position

指定阴影的位置,可以使用inset变成内部阴影

多重阴影

box-shadow 属性能在单个元素上接受多个阴影。每个阴影通过用逗号分隔的 box-shadow 属性列表来加载。

box-shadow: 20px 20px 20px 10px blue,
-20px -20px 20px 10px black;

简单示例

单边阴影

首先正常效果的话是这样子的 box-shadow: 0 8px 10px 0px black ;

会发现如果使用blur效果的话会出现三个方向的阴影 这种情况下我们其实是只想要下面的那一个阴影的,

思路:第三参数和第四参数相互抵消,可以让其他边框效果隐藏。

圆形阴影

box-shadow: 20px 20px 20px 10px blue,
border-radius: 50%;

yuanxign .png

层叠效果

利用单个元素接收多个阴影效果

box-shadow: rgba(240, 46, 170, 0.4) 5px 5px,
     rgba(240, 46, 170, 0.3) 10px 10px, 
     rgba(240, 46, 170, 0.2) 15px 15px, 
     rgba(240, 46, 170, 0.1) 20px 20px, 
     rgba(240, 46, 170, 0.05) 25px 25px;