CSS box-shadow 样式详解

一、引言

box-shadow 是一个非常有用的 CSS 属性，它可以为元素添加阴影效果，使得元素看起来更加立体和突出。本文将详细介绍 box-shadow 的语法、参数、使用示例以及一些高级应用技巧。

二、box-shadow 语法

box-shadow 属性的基本语法如下：

box-shadow: h-offset v-offset blur spread color inset;

• h-offset（水平偏移量）：阴影相对于元素的水平位置，正值向右，负值向左。

• v-offset（垂直偏移量）：阴影相对于元素的垂直位置，正值向下，负值向上。

• blur（模糊半径）：可选，阴影的模糊程度，值越大，阴影越模糊。

• spread（扩展半径）：可选，阴影的扩展范围，正值扩大阴影，负值缩小阴影。

• color（颜色）：阴影的颜色，可以是颜色名称、十六进制、RGB 或 RGBA 值。

• inset（内阴影）：可选，将阴影应用在元素内部。

三、参数详解

1. 水平偏移量 (h-offset)

• 正值：阴影向右偏移。

• 负值：阴影向左偏移。

2. 垂直偏移量 (v-offset)

• 正值：阴影向下偏移。

• 负值：阴影向上偏移。

3. 模糊半径 (blur)

• 值越大，阴影越模糊。

• 默认值为 0，即阴影边缘清晰。

4. 扩展半径 (spread)

• 正值：阴影扩大。

• 负值：阴影缩小。

5. 颜色 (color)

• 可以使用任何有效的 CSS 颜色值。

6. 内阴影 (inset)

• 添加 inset 关键字，阴影将出现在元素内部。

四、使用示例

1. 基本用法

.box0 {
  box-shadow: 5px 0px 0px 0px rgba(0, 0, 0, 0.3);
}
.box1 {
  box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.3);
}
.box2 {
  box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.3);
}
.box3 {
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.3);
}
.box4 {
  box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.box5 {
  box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.3) inset;
}
.box5 {
  box-shadow: -5px -5px 5px 5px rgba(0, 0, 0, 0.3);
}
.box6 {
  box-shadow: 0px -10px 0px 0px #ff0000, 
    -10px 0px 0px 0px #3bee17, 
    10px 0px 0px 0px #2279ee, 
    0px 10px 0px 0px #eede15;
}
.box7 {
  box-shadow: 0px -5px 10px 0px #ff0000, 
    -6px 0px 6px 0px #3bee17, 
    6px 0px 6px 0px #2279ee, 
    0px 5px 19px 0px #eede15;
}

效果图如下，对应css中样式从左往右依次排列

2. 模拟边框

通过设置较大的 spread 值和较浅的颜色，可以模拟边框效果，如下

.box {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}