box-shadow完整用法

账号已注销free2026-05-11 12:04

语法

css 复制代码

box-shadow: 水平偏移 垂直偏移 模糊半径 拓展半径 颜色 内外阴影；

参数说明

1.水平偏移：正数向右，负数向左

2.垂直偏移：正数向下，负数向上

3.模糊半径：越大越朦胧，不能负数

4.拓展半径：正数阴影变大，负数缩小

5.颜色：任意颜色

6.inset ：加了就是内阴影 ，不加默认外阴影

普通下右阴影

css 复制代码

box-shadow: 4px 4px 10px #ccc;

只模糊，不偏移（四周均匀阴影）

css 复制代码

box-shadow: 0 0 15px #ddd;

浅色柔和和卡片阴影（最常用）

css 复制代码

box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

css 复制代码

/* 四周阴影放大一点 */
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.15);

css 复制代码

/* 内部凹陷效果 */ 
box-shadow: inset 0 0 10px #999;

可以叠加多层阴影

css 复制代码

box-shadow: 
    0 2px 4px rgba(0,0,0,0.1),
    0 8px 20px rgba(0,0,0,0.15);

卡片默认阴影

css 复制代码

.card { 
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); 
    border-radius: 8px; 
}

悬浮加深阴影

css 复制代码

.card:hover { 
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); 
}

顶部阴影

css 复制代码

box-shadow: 0 -3px 10px rgba(0,0,0,0.1);

小技巧