box-shadow详细用法

`box-shadow` 是 CSS 中用于添加阴影效果的属性，可以用于盒状元素（即具有 `display: block` 或 `display: inline-block` 属性的元素）。以下是 `box-shadow` 的详细用法：

box-shadow: [inset] [x-offset] [y-offset] [blur-radius] [spread-radius] [color];

- `inset`：可选，表示是否将阴影设置为内阴影。如果设置为 `inset`，则阴影会显示在元素内部，而不是元素周围。
- `x-offset`：必选，表示阴影的水平偏移量。可以为正数（表示阴影在元素右侧）或负数（表示阴影在元素左侧）。
- `y-offset`：必选，表示阴影的垂直偏移量。可以为正数（表示阴影在元素下方）或负数（表示阴影在元素上方）。
- `blur-radius`：可选，表示阴影的模糊半径。可以为 0（表示无模糊效果）或正数（表示模糊半径越大，阴影越模糊）。
- `spread-radius`：可选，表示阴影的扩散半径。可以为 0（表示阴影不扩散）或正数（表示阴影扩散半径越大，阴影越大）。
- `color`：必选，表示阴影的颜色。可以使用以下颜色值：
- CSS 颜色关键字，如 `red`、`blue` 等。
- 十六进制颜色值，如 `#f00`、`#00ff00` 等。
- RGB 颜色值，如 `rgb(255, 0, 0)`、`rgba(0, 255, 0, 0.5)` 等。

以下是一些示例代码：

/* 添加一个黑色的外阴影 */
box-shadow: 0 0 10px #000;

/* 添加一个红色的内阴影 */
box-shadow: inset 0 0 10px #f00;

/* 添加一个向右下方偏移 5px 的阴影，模糊半径为 10px，扩散半径为 5px */
box-shadow: 5px 5px 10px 5px #000;

/* 添加一个向左上方偏移 5px 的阴影，模糊半径为 10px，扩散半径为 5px，颜色为半透明的红色 */
box-shadow: -5px -5px 10px 5px rgba(255, 0, 0, 0.5);

注意，`box-shadow` 属性可能会对性能产生一定影响，因此应谨慎使用。同时，`box-shadow` 属性在一些老旧的浏览器中可能不被支持。