如何利用CSS的box-shadow属性为元素添加内阴影和外阴影？

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、颜色为蓝色的阴影。