简介

box-shadow 是 CSS 中用于为元素添加阴影效果的属性。它可以用来创建简单的阴影、内阴影或者复杂的多层阴影。这个属性接受一系列参数来定义阴影的形状、位置、模糊程度、扩展程度和颜色。下面是 box-shadow 属性的参数详解：

基本语法

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

参数详解

1. inset (可选):

• 描述: 定义阴影是外阴影还是内阴影。
• 取值:
  • 默认情况下（不指定），阴影是外阴影。
  • 如果指定了 inset，阴影将变成内阴影，显示在元素内部。
• 示例: inset

2. x-offset:

• 描述: 阴影在水平方向的偏移量，即阴影相对于元素的水平移动。
• 取值: 任何有效的长度值（如 px,em,rem，负值）。
  • 正值：阴影向右偏移。
  • 负值：阴影向左偏移。
• 示例: 10px (阴影向右偏移10像素), -5px (阴影向左偏移5像素)

3. y-offset:

• 描述: 阴影在垂直方向的偏移量，即阴影相对于元素的垂直移动。
• 取值: 任何有效的长度值（如 px,em,rem，负值）。
  • 正值：阴影向下偏移。
  • 负值：阴影向上偏移。
• 示例: 5px (阴影向下偏移5像素), -3px (阴影向上偏移3像素)

4. blur-radius (可选):

• 描述: 定义阴影的模糊半径。值越大，阴影越模糊和扩散；如果设为 0，阴影将是清晰的边界。
• 取值: 任何有效的长度值（如 px, em）。默认为 0，表示没有模糊。
• 示例: 15px (阴影模糊半径为15像素)

5. spread-radius (可选):

• 描述: 定义阴影的扩展半径。正值会使阴影扩大，负值会使阴影收缩。
• 取值: 任何有效的长度值（如 px, em）。默认为 0，表示没有扩展。
• 示例: 10px (阴影扩展10像素), -5px (阴影缩小5像素)

6. color (可选):

• 描述: 定义阴影的颜色。如果不指定颜色，默认使用 color 属性值。
• 取值: 任何有效的颜色值（如 #000, rgba(0, 0, 0, 0.5)）。
• 示例: rgba(0, 0, 0, 0.5) (半透明的黑色)

多重阴影

你可以通过逗号分隔的方式为一个元素指定多个阴影。每个阴影将会按照顺序叠加在前一个阴影之上。

css
box-shadow: 10px 10px 5px #888888, -5px -5px 5px #444444;

示例

css
/* 单个外阴影 */
box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);

/* 内阴影 */
box-shadow: inset 5px 5px 10px 0px rgba(0, 0, 0, 0.5);

/* 多重阴影 */
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.3), -3px -3px 5px 0px rgba(255, 255, 255, 0.3);

常见用法举例说明

• 单个外阴影: 10px 10px 5px 0px rgba(0, 0, 0, 0.75) 表示阴影向右下偏移 10px，模糊半径为 5px，颜色为半透明的黑色。
• 内阴影: inset 5px 5px 10px 0px rgba(0, 0, 0, 0.5) 表示一个内阴影，向右下偏移 5px，模糊半径为 10px，颜色为半透明的黑色。
• 多重阴影: 3px 3px 5px 0px rgba(0, 0, 0, 0.3) 和 -3px -3px 5px 0px rgba(255, 255, 255, 0.3) 表示两个阴影，一个向右下偏移，另一个向左上偏移，分别有不同的颜色和模糊效果。

通过合理调整这些参数，box-shadow 可以用来创建丰富多样的视觉效果，如浮动效果、嵌入效果、发光效果等。