语法
box-shadow: 水平偏移 垂直偏移 模糊半径 拓展半径 颜色 内外阴影；
参数说明
1.水平偏移：正数向右，负数向左
2.垂直偏移：正数向下，负数向上
3.模糊半径：越大越朦胧，不能负数
4.拓展半径：正数阴影变大，负数缩小
5.颜色：任意颜色
6.inset：加了就是内阴影，不加默认外阴影
1. 基础常用写法
普通下右阴影
box-shadow: 4px 4px 10px #ccc;
只模糊，不偏移（四周均匀阴影）
box-shadow: 0 0 15px #ddd;
浅色柔和和卡片阴影（最常用）
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
2. 带拓展半径
/* 四周阴影放大一点 */
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.15);
3. 内阴影inset
/* 内部凹陷效果 */
box-shadow: inset 0 0 10px #999;
4. 多重阴影（逗号分隔）
可以叠加多层阴影
box-shadow:
0 2px 4px rgba(0,0,0,0.1),
0 8px 20px rgba(0,0,0,0.15);
5. 常用开发模板
卡片默认阴影
.card {
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
border-radius: 8px;
}
悬浮加深阴影
.card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
顶部阴影
box-shadow: 0 -3px 10px rgba(0,0,0,0.1);
小技巧
- 做 UI 阴影优先用 rgba，透明度更好控制
- 不要用纯黑色
#000，用rgba(0,0,0,0.1~0.2)更自然 - 模糊值越大越柔和，适合卡片；小模糊适合边框质感
效果展示
