阅读量:0
box-shadow是给元素块添加内阴影外阴影的CSS属性。
CSSbox-shadow 属性详解
box-shadow 是 CSS 中的一个属性，用于为元素添加内阴影和外阴影，通过使用这个属性，可以为元素的边框添加一个或多个阴影，从而增强视觉效果。
基本语法
box-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [spread-radius] [color];
| 参数 | 描述 |
| horizontal-offset | 水平偏移量，正值向右，负值向左。 |
| vertical-offset | 垂直偏移量，正值向下，负值向上。 |
| blur-radius | 模糊半径，值越大，阴影越模糊。 |
| spread-radius | 扩展半径，正值扩大阴影，负值缩小阴影。 |
| color | 阴影的颜色，默认为黑色。 |
示例
1、基础阴影
```css
.box {
box-shadow: 10px 5px 5px 0px rgba(0,0,0,0.75);
}
```
解释：向右偏移 10px，向下偏移 5px，模糊度为 5px，扩展为 0，颜色为半透明黑色。
2、多重阴影
```css
.box {
box-shadow: 3px 3px 5px grey, -1em 0 0.4em blue;
}
```
解释：第一个阴影向右偏移 3px，向下偏移 3px，模糊度为 5px，颜色为灰色；第二个阴影向左偏移 1em，没有垂直偏移，模糊度为 0.4em，颜色为蓝色。
3、内阴影
```css
.box {
box-shadow: inset 0 0 10px #000000;
}
```
解释：向内偏移 0，垂直偏移也为 0，模糊度为 10px，颜色为黑色。
相关问题与解答
问题一：box-shadow 的blur-radius 参数有什么作用？
答：blur-radius 参数控制阴影的模糊程度，值越大，阴影越模糊，边界越不清晰，如果设置为0，则阴影边缘非常锐利，没有模糊效果。
问题二：如何在元素中同时应用多个阴影效果？
答：可以在box-shadow 属性中使用逗号分隔多个阴影定义，每个定义之间用逗号隔开。
.multiple-shadows { box-shadow: 3px 3px 5px grey, -1em 0 0.4em blue; }这样，元素将同时拥有两个阴影效果：一个是向右偏移 3px、向下偏移 3px、模糊度为 5px、颜色为灰色的阴影；另一个是向左偏移 1em、无垂直偏移、模糊度为 0.4em、颜色为蓝色的阴影。
以上内容就是解答有关“box-shadow是给元素块添加内阴影外阴影”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。
