参考资料

1. CSS3 阴影
2. CSS阴影颜色
3. css阴影效果怎么设置
4. CSS阴影透明度设置
5. css阴影效果属性有哪些,
6. 子选择器详细说明以及案例
7. 如何避免 CSS 过渡动画卡顿？
8. css颜色属性详细说明以及案例

CSS 阴影边框设置

CSS 阴影边框设置

1. box-shadow 属性

用于在元素边框外或内添加阴影效果。

语法：

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

属性值：

• h-offset（必需）：水平阴影位置（正值向右，负值向左）。

• v-offset（必需）：垂直阴影位置（正值向下，负值向上）。

• blur（可选）：模糊距离（值越大越模糊，0 表示无模糊）。

• spread（可选）：阴影扩展尺寸（正值扩大，负值缩小）。

• color（可选）：阴影颜色（默认与文本颜色相同）。

• inset（可选）：将阴影改为内部阴影（默认是外部）。

2. 基本用法示例

外阴影：

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

• 效果：向右下角偏移 5px，模糊 10px，扩展 2px 的灰色半透明阴影。

内阴影：

div {
  box-shadow: inset 0 0 8px #000;
}

• 效果：元素内部四周添加 8px 模糊的黑色阴影。

3. 多重阴影

用逗号分隔多个阴影值：

div {
  box-shadow: 
    3px 3px 5px red,
    -3px -3px 5px blue;
}

• 效果：右下方红色阴影 + 左上方蓝色阴影。

4. 常用场景示例

按钮悬浮效果：

button {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
button:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

卡片设计：

.card {
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
}

5. 注意事项

• 阴影不影响布局（不占用实际空间）。

• 性能：过度使用模糊阴影可能影响页面渲染性能。

• 浏览器支持：所有现代浏览器均支持，IE9+ 支持。