box-shadow 属性值详解

语法

box-shadow:offset-x offset-y blur-radius spread-radius color inset;

只有offset-x和offset-y是必填的，其余参数可选，且顺序不能乱。

参数说明

常见写法

/* 最简：只写偏移和颜色 */box-shadow:2px 2px #333;/* 标准：偏移 + 模糊 + 颜色 */box-shadow:0 2px 8pxrgba(0,0,0,0.15);/* 完整：偏移 + 模糊 + 扩展 + 颜色 */box-shadow:0 2px 8px 2pxrgba(0,0,0,0.15);/* 内阴影 */box-shadow:inset 0 2px 4pxrgba(0,0,0,0.1);/* 多重阴影：逗号分隔 */box-shadow:0 1px 2pxrgba(0,0,0,0.1),0 4px 8pxrgba(0,0,0,0.08);

常见场景

/* 卡片轻微浮起 */box-shadow:0 2px 8pxrgba(0,0,0,0.1);/* 按钮点击态 */box-shadow:inset 0 2px 4pxrgba(0,0,0,0.2);/* 顶部导航栏底部阴影 */box-shadow:0 1px 0rgba(0,0,0,0.05);/* 弹窗 */box-shadow:0 8px 24pxrgba(0,0,0,0.12);

注意事项

1. blur-radius不能为负值。
2. 颜色建议用rgba()，方便控制透明度，比纯黑更自然。
3. 多重阴影按从前往后的顺序渲染，前面的阴影在上层。
4. spread-radius为正时阴影整体扩大，为负时整体收缩。
5. inset写在颜色前面或后面都可以，但位置不能影响其他参数的解析。