css阴影制作

CSS 阴影基础语法

CSS 提供 box-shadow 和 text-shadow 属性，分别用于元素框和文本的阴影效果。

box-shadow 语法

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

• h-offset：水平偏移（正值向右，负值向左）。
• v-offset：垂直偏移（正值向下，负值向上）。
• blur：模糊半径（值越大边缘越模糊，0 表示无模糊）。
• spread：阴影扩展（正值扩大阴影，负值收缩）。
• color：阴影颜色（支持 HEX、RGB、RGBA 等格式）。
• inset：可选关键字，将阴影改为内阴影。

text-shadow 语法

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

参数含义与 box-shadow 类似，但无 spread 和 inset。

常见阴影效果示例

基础外阴影

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

效果：向右下方偏移 5px，模糊 10px，半透明黑色阴影。

内阴影

.box {
  box-shadow: inset 0 0 15px #333;
}

效果：元素内部添加模糊 15px 的灰色阴影。

多层阴影

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

效果：叠加两层阴影增强立体感。

文本阴影

.text {
  text-shadow: 1px 1px 2px #000;
}

效果：文字右下方添加 2px 模糊的黑色阴影。

高级技巧

模糊与扩展控制
通过调整 blur 和 spread 实现不同效果：

.soft-shadow {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2); /* 柔和扩散 */
}
.hard-shadow {
  box-shadow: 0 0 0 5px #ff0000; /* 无模糊，红色边框式阴影 */
}

悬浮效果
结合 hover 状态增强交互：

.card {
  transition: box-shadow 0.3s;
}
.card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

透明背景阴影
使用 filter: drop-shadow() 为透明元素（如 PNG 图标）添加阴影：

.icon {
  filter: drop-shadow(2px 2px 4px #000);
}