CSS 阴影边框设置

参考资料

1. 哪种布局方式更适合移动端？
2. css文字阴影属性
3. Vanta.js 如何与 CSS 过渡结合？
4. 详细说明：justify-content: flex-start/end
5. css布局格式
6. css div内容居中
7. Flexbox布局有哪些常见的误区？
8. 背景属性详细说明以及案例

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+ 支持。