阴影

box-shadow

box-shadow不会占据空间，因此不会对页面造成抖动

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

参数	说明	是否必填	示例
offset-x	阴影在水平方向的偏移量（正数向右，负数向左）	✅	10px
offset-y	阴影在垂直方向的偏移量（正数向下，负数向上）	✅	5px
blur-radius	模糊半径，值越大越模糊，默认 0（无模糊）	❌	15px
spread-radius	阴影的扩展半径，正数扩大阴影，负数缩小阴影	❌	5px
color	阴影颜色，支持透明度	❌	rgba(0, 0, 0, 0.3)
inset	将阴影改为内阴影（默认是外阴影）	❌	inset

示例：

/*小米商城的卡片阴影*/
box-shadow: 0 15px 30px rgba(0, 0, 0, .1);

去除阴影：

box-shadow: none;