CSS 阴影

阴影是为网页元素增加深度和层次感的重要工具。CSS 提供了两种主要的阴影属性：box-shadow 用于为元素的盒子添加阴影，text-shadow 用于为文本内容添加阴影。

`box-shadow`

box-shadow 属性可以为一个元素添加一个或多个阴影。一个基本的阴影由以下几个值定义：

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

h-offset (必需): 水平偏移量。正值使阴影出现在元素的右侧，负值在左侧。
v-offset (必需): 垂直偏移量。正值使阴影出现在元素的下方，负值在上方。
blur-radius (可选): 模糊半径。值越大，阴影的边缘越模糊、越柔和。0 表示清晰、不模糊的阴影。
spread-radius (可选): 扩展半径。正值使阴影向各个方向扩展，使其变大；负值使阴影收缩。默认是 0。
color (可选): 阴影的颜色。如果没有指定，通常会使用元素的 color 属性值。
inset (可选): 如果设置了 inset 关键字，阴影将是内阴影，绘制在元素的内部。

示例

css

/* 一个简单的右下方阴影 */
.shadow-1 {
  box-shadow: 5px 5px #888888;
}

/* 一个更柔和、更弥散的阴影 */
.shadow-2 {
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

/* 一个内阴影 */
.inset-shadow {
  box-shadow: inset 0 0 10px #000000;
}

多重阴影

你可以通过用逗号分隔，为一个元素应用多个阴影。这可以用来创建更复杂、更逼真的深度效果。

css

.multi-shadow {
  box-shadow: 0 1px 1px rgba(0,0,0,0.12),
              0 2px 2px rgba(0,0,0,0.12),
              0 4px 4px rgba(0,0,0,0.12),
              0 8px 8px rgba(0,0,0,0.12),
              0 16px 16px rgba(0,0,0,0.12);
}

`text-shadow`

text-shadow 属性用于为文本添加阴影。它的语法与 box-shadow 非常相似，但没有 spread-radius 和 inset。

text-shadow: [h-offset] [v-offset] [blur-radius] [color];

示例

css

/* 为标题添加一个简单的阴影 */
h1 {
  text-shadow: 2px 2px 4px #000000;
}

/* 创建一个“浮雕”效果 */
.emboss {
  color: white;
  text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}

/* 创建一个发光效果 */
.glow {
  color: #fff;
  text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 20px #ff00de,
               0 0 30px #ff00de,
               0 0 40px #ff00de;
}

通过巧妙地运用阴影，你可以显著提升设计的质感和专业度。

CSS 阴影 ​

box-shadow ​

示例 ​

多重阴影 ​

text-shadow ​

示例 ​

CSS 阴影

`box-shadow`

示例

多重阴影

`text-shadow`

示例