css怎么添加阴影效果？（代码实例）

css中实现阴影效果主要依靠两个核心属性，分别是用于给元素盒子添加阴影的box-shadow，以及用于给文字添加阴影的text-shadow，这两个属性覆盖了绝大多数场景下的阴影需求，下面分别介绍它们的用法和常见场景。

box-shadow属性：给元素盒子添加阴影

box-shadow用于给块级元素或者行内块元素的外部或内部添加阴影，语法格式为box-shadow: h-shadow v-shadow blur spread color inset;，各个参数的含义如下：

• h-shadow：必需，水平阴影的位置，允许负值，正值向右偏移，负值向左偏移
• v-shadow：必需，垂直阴影的位置，允许负值，正值向下偏移，负值向上偏移
• blur：可选，模糊距离，值越大阴影越模糊，默认是0，没有模糊效果
• spread：可选，阴影的扩展尺寸，正值阴影扩大，负值阴影缩小，默认是0
• color：可选，阴影的颜色，默认是元素的文本颜色
• inset：可选，加上这个关键字表示内阴影，不写默认是外阴影

下面是一个基础的box-shadow使用示例，给一个卡片元素添加外阴影：

/* 卡片基础样式 */
.card {
  width: 300px;
  height: 200px;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  /* 添加外阴影：水平偏移2px，垂直偏移4px，模糊6px，扩展0px，灰色阴影 */
  box-shadow: 2px 4px 6px 0px rgba(0, 0, 0, 0.1);
}

/* 内阴影示例 */
.inner-shadow-box {
  width: 200px;
  height: 100px;
  background-color: #f5f5f5;
  /* 内阴影：水平0，垂直0，模糊10px，扩展0，灰色内阴影 */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2) inset;
}

text-shadow属性：给文字添加阴影

text-shadow专门用于给文字添加阴影效果，语法格式为text-shadow: h-shadow v-shadow blur color;，参数含义和box-shadow的前四个参数类似，只是没有spread和inset参数：

• h-shadow：必需，水平阴影位置，允许负值
• v-shadow：必需，垂直阴影位置，允许负值
• blur：可选，模糊距离，值越大文字阴影越模糊
• color：可选，阴影颜色，默认是元素的文本颜色

下面是text-shadow的使用示例，给标题文字添加阴影效果：

/* 标题文字阴影 */
.title {
  font-size: 24px;
  color: #333333;
  /* 文字阴影：水平1px，垂直1px，模糊2px，浅灰色阴影 */
  text-shadow: 1px 1px 2px #cccccc;
}

/* 多重文字阴影示例，实现发光效果 */
.glow-text {
  font-size: 28px;
  color: #ff4400;
  /* 多重阴影用逗号分隔，这里叠加两层不同模糊度的红色阴影 */
  text-shadow: 0 0 5px #ff4400, 0 0 10px #ff4400;
}

常见阴影效果组合示例

实际开发中经常会组合使用阴影参数实现更立体的效果，比如模拟卡片悬浮的立体感，或者给按钮添加点击反馈的阴影变化：

/* 悬浮有立体感的卡片 */
.float-card {
  width: 280px;
  height: 180px;
  background-color: #fff;
  border-radius: 10px;
  /* 初始阴影较淡 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}

/* 鼠标悬浮时加深阴影，模拟浮起效果 */
.float-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}

/* 按钮阴影示例 */
.btn {
  padding: 10px 20px;
  background-color: #1677ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(22, 119, 255, 0.4);
}

.btn:active {
  /* 点击时缩小阴影，模拟按下效果 */
  box-shadow: 0 1px 2px rgba(22, 119, 255, 0.4);
}

需要注意的是，阴影效果会增加浏览器的渲染负担，如果页面中存在大量带阴影的元素，可能会影响页面性能，建议非必要场景不要给过多元素添加复杂的阴影效果。另外阴影颜色尽量使用带透明度的色值，避免生硬的纯色阴影，这样视觉效果会更自然。

css阴影box-shadowtext-shadowbox_shadowtext_shadow修改时间：2026-06-04 07:19:07