在现代网页设计中，视觉效果是吸引用户的关键。CSS的
box-shadow
属性能够为网页元素添加阴影效果，从而增强视觉层次感和深度。本文将详细介绍
box-shadow
的用法及其实际应用，并通过示例代码展示其效果。
一、什么是CSS box-shadow？
box-shadow
属性用于在元素的框架上添加阴影效果。它允许开发者定义阴影的水平偏移、垂直偏移、模糊半径、扩展半径以及颜色。通过合理使用
box-shadow
，可以显著提升网页的视觉吸引力。
1. 语法
box-shadow: h-offset v-offset blur spread color;
h-offset
：水平偏移量，正值向右，负值向左。
v-offset
：垂直偏移量，正值向下，负值向上。
blur
：模糊半径，值越大阴影越模糊。
spread
：扩展半径，正值使阴影扩大，负值使阴影缩小。
color
：阴影的颜色。
二、box-shadow的实际应用
1. 基本阴影
以下是一个简单的例子，展示如何为
div
元素添加一个基本的外阴影效果：
在这个例子中，
div
元素获得了一个外阴影效果，水平偏移为5像素，垂直偏移为5像素，模糊半径为5像素，颜色为半透明的黑色。
2. 多重阴影
box-shadow
属性支持多个阴影，可以通过逗号分隔这些阴影值。以下是一个添加两个阴影效果的例子：
在这个例子中，
div
元素上添加了两个阴影效果，一个向右下方投影，另一个向左上方投影。
3. 内阴影
使用
inset
关键字可以指定阴影为内阴影。以下是一个内阴影的例子：
在这个例子中，
div
元素获得了一个内阴影效果，颜色为半透明的黑色。
三、总结
通过使用CSS的
box-shadow
属性，可以轻松地为网页元素添加立体视觉效果。通过调整阴影的偏移、模糊半径、扩展半径和颜色，可以创造出丰富的视觉效果，提升网页的吸引力和用户体验。