CSS教程：box-shadow 阴影 作者：马育民 • 2023-05-27 10:41 • 阅读：10219 # box-shadow 该属性可以设置阴影 ### 属性 box-shadow 属性 **有5个** 不同的部分组成（这5个部分不需要都写，要注意顺序） ``` box-shadow: offset-x offset-y blur spread color position; ``` ### offset-x 阴影 **水平方向** 的偏移，即阴影在 x 轴的位置： - 值为 `0`，左右都有阴影 - 值为 **正数** 时，阴影在元素的 **右侧** - 值为 **负数** 时，阴影在元素的 **左侧** 例子： ``` .left { box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) } .right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) } ``` [](/upload/0/0/1IX5ZfEQbWfy.jpg) ### offset-y 阴影 **竖直方向** 的偏移，即阴影在 y 轴的位置： - 值为 `0`，上下都有阴影 - 值为 **正数** 时，阴影在元素的 **下方** - 值为 **负数** 时，阴影在元素的 **上方** 例子： ``` .left { box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5) } .right { box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5) } ``` [](/upload/0/0/1IX5ZfDytkiu.jpg) ### blur 阴影的 **模糊半径**，举例来说，就是你在设计软件中使用 高斯模糊 滤波器带来的效果。 - 值为 `0` 意味着该阴影是 **固态而锋利的**，**完全没有模糊效果**。 - blur 值越大，阴影 **越不锋利而更朦胧模糊** **注意：**不能是负值 例子： ``` .left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) } .middle { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) } .right { box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5) } ``` [](/upload/0/0/1IX5ZfDUZRwr.png) ### spread 阴影 **扩展半径**，其值可以是正负值： - 值为正，则整个阴影都延展扩大 - 值为负值，则缩小。 **注意：**前提是存在阴影模糊半径 例子： ``` .left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) } .middle { box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.5) } .right { box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.5) } ``` [](/upload/0/0/1IX5ZfCsrWpo.png) ### color color 部分的值正如你所预料的，是指阴影的颜色。它可以是任意的颜色单元 （见 在 CSS 中与颜色打交道）。 ``` .left { box-shadow: 0px 0px 20px 10px #67b3dd } .right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) } ``` [](/upload/0/0/1IX5ZfCN9czk.jpg) ### position 此参数是一个可选值，如果不设值，其默认的投影方式是外阴影，值是 `inset` 表示内阴影 ``` .left { box-shadow: 0px 0px 20px 10px #67b3dd } .right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) inset} ``` [](/upload/0/0/1IX5ZfBoy54h.jpg) 参考： https://blog.csdn.net/qq_47443027/article/details/116042399 原文出处：https://malaoshi.top/show_1IX5ZcRuRhmn.html