正确应用 CSS 盒阴影 + 免费资源
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
你好，我亲爱的朋友，欢迎来到本教程！
今天，我将讲解 CSS 盒阴影，并分享一些很棒的资源，可以帮助你快速地为网站上的元素添加盒阴影！
请陪我走到最后！🍻
什么是阴影框？
Box-shadow是一个 CSS 属性，用于在元素的框架周围添加阴影效果，您可以设置多个效果，并用逗号分隔。
语法如下：
box-shadow: [optional inset] [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
Box Shadow 可以接受除百分比以外的所有其他测量类型 %。
这些阴影效果具体分别代表什么意思？
1. 插图：
这是一个可选关键字。使用 inset 关键字会将阴影方向更改为位于画面内部，而不是默认的向外显示。
2. 水平偏移：
这表示元素右侧的阴影。正值表示阴影位于方框右侧，负值表示阴影位于方框左侧。此参数为必填项。
下图展示了水平偏移量（30px）和内边距属性的效果。
请注意，内边距属性会像负水平偏移量一样改变阴影的方向。
3. 垂直偏移：
这表示元素底部的阴影。正值表示阴影位于底部，负值表示阴影位于顶部。此值为必填项。
以下是另一个类似于水平偏移的例子
4. 模糊半径：
这会增加阴影颜色的不透明度。默认值为零。如果设置为 0 或未指定，阴影将非常清晰。数值越高，阴影越模糊。此项为可选。
5. 扩散半径：
此参数决定阴影的大小。数值越大，阴影越大。此外，阴影长度的终点即为模糊的起点。正值增大阴影，负值减小阴影。其默认值为 0（与模糊半径大小相同）。
让我们来看看 CSS 盒阴影的一些应用案例。
Codepen 上有趣的 Box Shadow 示例🚀
💯 免费资源，助你快速上手 CSS 盒阴影 🚀
感谢您阅读到最后。
欢迎关注，获取更多有趣且有教育意义的文章，也欢迎在
🚀 LinkedIn
🚀 Twitter上与我联系。
