上查看所有课程
CSS 的 box-shadow 属性用于为元素添加阴影。例如，
h1 {
box-shadow: 12px 12px 8px purple;
background-color: greenyellow;
}浏览器输出
在此，box-shadow 属性为 h1 元素的文本内容添加了一个 purple（紫色）的阴影。
盒阴影也称为投影。
CSS box-shadow 语法
box-shadow 属性的语法如下：
box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color | inset | initial | inherit | none ;这里，
horizontal-offset：指定阴影相对于元素的水平位置vertical-shadow：指定阴影相对于元素的垂直位置blur-radius：指定用于控制阴影模糊程度的值spread-radius：指定用于扩展或收缩阴影的值color：指定阴影的颜色，可以是任何格式，如命名颜色、十六进制颜色、RGB或HSLinset：将阴影放在元素内部，默认情况下阴影在元素外部创建initial：将值设置为默认值inherit：继承其父元素的值none：指定默认值，无阴影
注意：box-shadow 属性需要 horizontal-shadow 和 vertical-shadow 的值，而其他值是可选的。
CSS box-shadow：添加水平阴影
可以使用 box-shadow 属性中的 horizontal-offset 值来调整水平阴影。horizontal-offset 值可以取正值和负值。
在 horizontal-offset 值中，
- 正值会在右侧方向创建阴影
- 负值会在左侧方向创建阴影
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS box-shadow</title>
</head>
<body>
<h1>Horizontal Shadows</h1>
<p>
The positive value of the horizontal offset creates a shadow in the
right direction.
</p>
<h2 class="positive-value">box-shadow: 20px 10px orange;</h2>
<p>
The negative value of the horizontal offset creates a shadow in the
left direction.
</p>
<h2 class="negative-value">box-shadow: -20px 10px orange;</h2>
</body>
</html>h2 {
background-color: greenyellow;
}
h2.positive-value {
/* horizontal-offset | vertical-offset | shadow color */
box-shadow: 20px 10px orange;
}
h2.negative-value {
/* horizontal-offset | vertical-offset | shadow color */
box-shadow: -20px 10px orange;
}浏览器输出
CSS box-shadow：添加垂直阴影
可以使用 box-shadow 属性中的 vertical-offset 值来调整垂直阴影。vertical-offset 值可以取正值和负值。
在 vertical-offset 值中，
- 正值会在底部方向创建阴影
- 负值会在顶部方向创建阴影
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS box-shadow</title>
</head>
<body>
<h1>Vertical Shadows</h1>
<p>
The positive value of the vertical offset creates a shadow in the
bottom direction.
</p>
<h2 class="positive-value">box-shadow: 10px 10px orange;</h2>
<p>
The negative value of the vertical offset creates a shadow in the
top direction.
</p>
<h2 class="negative-value">box-shadow: 10px -10px orange;</h2>
</body>
</html>h2 {
background-color: greenyellow;
}
h2.positive-value {
/* horizontal-offset | vertical-offset | shadow color */
box-shadow: 10px 10px orange;
}
h2.negative-value {
/* horizontal-offset | vertical-offset | shadow color */
box-shadow: 10px -10px orange;
}浏览器输出
CSS box-shadow：添加模糊半径
box-shadow 属性的 blur-radius 值用于模糊阴影。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS box-shadow</title>
</head>
<body>
<h1>Blurry Shadows</h1>
<p>This shadow has a blur value of 5px.</p>
<h2 class="blur-5px">box-shadow: 10px 10px 5px orange;</h2>
<p>This shadow has a blur value of 15px.</p>
<h2 class="blur-10px">box-shadow: 10px 10px 15px orange;</h2>
</body>
</html>h2 {
background-color: greenyellow;
}
h2.blur-5px {
/* horizontal-offset | vertical-offset | blur-radius | shadow color */
box-shadow: 10px 10px 5px orange;
}
h2.blur-10px {
/* horizontal-offset | vertical-offset | blur-radius | shadow color */
box-shadow: 10px 10px 15px orange;
}浏览器输出
注意：blur-radius 的默认值为 0，表示没有模糊。值越大，阴影看起来越模糊。
CSS box-shadow：添加扩展半径
box-shadow 属性的 spread-radius 值用于增加或减小阴影的大小。
阴影大小：
- 随正值而增加
- 随负值而减小
- 在 0（默认值）时保持相同大小
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS box-shadow</title>
</head>
<body>
<h1>Adding spread radius</h1>
<p>This shadow has a 5px value of blur-radius and spread-radius.</p>
<h2 class="spread-5px">box-shadow: 10px 10px 5px 5px black;</h2>
<p>This shadow has a 5px blur-radius and 10px spread-radius.</p>
<h2 class="spread-10px">box-shadow: 10px 5px 10px 10px black;</h2>
<p>This shadow has 5px value of spread-radius and no blur-radius.</p>
<h2 class="no-blur">box-shadow: 10px 5px 0px 5px black;</h2>
</body>
</html>h2 {
background-color: greenyellow;
}
h2.spread-5px {
/* horizontal-offset | vertical-offset | blur-radius | spread-radius | shadow color */
box-shadow: 10px 10px 5px 5px black;
}
h2.spread-10px {
/* horizontal-offset | vertical-offset | blur-radius | spread-radius | shadow color */
box-shadow: 10px 5px 10px 10px black;
}
h2.no-blur {
/* horizontal-offset | vertical-offset | blur-radius | spread-radius | black default color */
box-shadow: 10px 5px 0px 5px;
}浏览器输出
注意：在提供 spread-radius 的值之前指定 blur-radius 的值非常重要。否则，扩展半径将被误解为模糊半径值。
如果我们不想包含模糊效果，可以将 blur-radius 设置为 0px。
创建均匀阴影
阴影可以均匀地分布在元素的各个侧面。为此，我们需要将 horizontal-offset 和 vertical-offset 值设置为 0，并提供 blur-radius 和 spread-radius 值。
这会导致阴影均匀地散布在元素的各个侧面。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS box-shadow</title>
</head>
<body>
<h1>Evenly Distributed Shadows</h1>
<h2 class="first-shadow">box-shadow: 0px 0px 5px 2px purple;</h2>
<h2 class="second-shadow">
box-shadow: 0px 0px 10px 5px purple;
</h2>
<h2 class="third-shadow">box-shadow: 0px 0px 15px 8px purple;</h2>
</body>
</html>h2 {
border: 2px solid black;
margin-bottom: 50px;
}
h2.first-shadow {
box-shadow: 0px 0px 5px 2px purple;
}
h2.second-shadow {
box-shadow: 0px 0px 10px 5px purple;
}
h2.third-shadow {
box-shadow: 0px 0px 15px 8px purple;
}浏览器输出
创建内阴影
box-shadow 属性的 inset 值用于创建内阴影。默认情况下，阴影在元素外部创建。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS box-shadow</title>
</head>
<body>
<h1>The inset keyword</h1>
<h2 class="shadow-one">box-shadow: inset 0px 0px 5px 2px purple;</h2>
<h2 class="shadow-two">box-shadow: inset 0px 0px 10px 5px purple;</h2>
<h2 class="shadow-three">
box-shadow: inset 0px 0px 15px 8px purple;
</h2>
</body>
</html>h2 {
border: 2px solid black;
margin-bottom: 50px;
}
h2.shadow-one {
box-shadow: inset 0px 0px 5px 2px purple;
}
h2.shadow-two {
box-shadow: inset 0px 0px 10px 5px purple;
}
h2.shadow-three {
box-shadow: inset 0px 0px 15px 8px purple;
}浏览器输出
添加多个盒阴影
可以通过用逗号分隔来将多个阴影应用于一个元素。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS box-shadow</title>
</head>
<body>
<h1>Multiple Box Shadows</h1>
<p>box-shadow: 8px 8px purple, 16px 16px yellow, 22px 22px green;</p>
</body>
</html>p {
box-shadow: 8px 8px purple, 16px 16px yellow, 22px 22px green;
background-color: greenyellow;
padding: 20px;
}浏览器输出
在上面的示例中，每个阴影代表一个单独的阴影层，并按照指定的顺序堆叠在一起。