当前位置：首页 > CSS

css制作阴影效果

2026-01-28 12:47:02CSS

CSS 制作阴影效果的方法

使用 `box-shadow` 属性

box-shadow 是制作阴影效果最常用的属性，可以为元素添加一个或多个阴影效果。语法如下：

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

h-offset：水平阴影偏移量（正值向右，负值向左）。
v-offset：垂直阴影偏移量（正值向下，负值向上）。
blur：模糊半径（可选，值越大越模糊）。
spread：阴影扩展半径（可选，正值扩大阴影，负值缩小阴影）。
color：阴影颜色（可选，默认为当前文本颜色）。
inset：内阴影（可选，默认为外阴影）。

示例：

div {
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.3);
}

多重阴影效果

通过逗号分隔多个 box-shadow 值，可以为元素添加多重阴影效果：

div {
  box-shadow: 
    2px 2px 5px rgba(0, 0, 0, 0.2),
    -2px -2px 5px rgba(255, 255, 255, 0.5);
}

内阴影效果

添加 inset 关键字可以创建内阴影效果：

div {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

使用 `text-shadow` 属性

text-shadow 专门用于为文本添加阴影效果，语法与 box-shadow 类似：

text-shadow: h-offset v-offset blur color;

示例：

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

使用 `filter: drop-shadow()`

filter 属性中的 drop-shadow() 函数可以为元素（包括非矩形元素，如 SVG）添加阴影效果：

img {
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}

阴影效果优化技巧

透明度调整：使用 rgba() 或 hsla() 调整阴影透明度，避免阴影过于生硬。
模糊半径：适当增加 blur 值可以让阴影更柔和。
性能考虑：过多或复杂的阴影效果可能影响页面性能，需谨慎使用。

示例代码整合

/* 外阴影 */
.shadow-example {
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
}

/* 内阴影 */
.inset-shadow {
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
}

/* 文本阴影 */
.text-shadow {
  text-shadow: 1px 1px 3px #666;
}

/* 多重阴影 */
.multi-shadow {
  box-shadow: 
    0 0 10px #fff,
    0 0 20px #f0f;
}

css制作阴影效果