box-shadow完整用法

语法

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) 更自然
• 模糊值越大越柔和，适合卡片；小模糊适合边框质感