盒阴影 box-shadow
box-shadow 偏移/模糊/扩散/颜色/inset、多层阴影、卡片效果
盒阴影 box-shadow
box-shadow 给元素添加阴影——卡片、按钮、弹窗都离不开它。
学完本章你将： 掌握 box-shadow 偏移/模糊/扩散/颜色/inset、多层阴影。
基本语法
css
/* box-shadow: 水平偏移 垂直偏移 模糊半径 扩散半径 颜色; */
.card { box-shadow: 2px 2px 8px rgba(0,0,0,0.1); }各种效果
css
/* 右下阴影 */
.shadow-1 { box-shadow: 5px 5px 10px rgba(0,0,0,0.1); }
/* 均匀扩散 */
.shadow-2 { box-shadow: 0 0 15px rgba(0,0,0,0.1); }
/* 大扩散——更像卡片 */
.card { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
/* 内阴影 inset */
.inset { box-shadow: inset 0 2px 5px rgba(0,0,0,0.1); }
/* 多层阴影 */
.layered {
box-shadow:
0 1px 3px rgba(0,0,0,0.12),
0 1px 2px rgba(0,0,0,0.24);
}
/* 不同方向 */
.top-shadow { box-shadow: 0 -5px 10px rgba(0,0,0,0.1); }
.left-shadow { box-shadow: -5px 0 10px rgba(0,0,0,0.1); }Material Design 阴影参考
css
.shadow-1 { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
.shadow-2 { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); }
.shadow-3 { box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); }
.shadow-4 { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); }