box-shadow

概述

box-shadow以逗号分割列表来描述一个或多个阴影效果,可以用到几乎任何元素上。 如果元素同时设置了 border-radius ,阴影也会有圆角效果。多个阴影的 z-ordering 和多个 text-shadows 规则相同(第一个阴影在最上面)。

box-shadow可以设置6个值。其中4个可选;2个必须指定:分别是x轴偏移量和y轴偏移量,这2个值可以是正值,可以是负值,也可以是0,但不可以省略不写

兼容性

基本应用

外部阴影偏移(正值)

box-shadow: 5px 5px #888

内部阴影偏移(正值)

box-shadow: inset 5px 5px #888

外部阴影偏移(负值)

box-shadow: -5px -5px #888

内部阴影偏移(负值)

box-shadow: inset -5px -5px #888

外部阴影模糊

box-shadow: 0 0 10px #888

内部阴影模糊

box-shadow: inset 0 0 10px #888

外部阴影扩展

box-shadow: 0 0 0 10px #888

内部阴影扩展

box-shadow: inset 0 0 0 10px #888

进阶应用

文本聚焦效果

凹陷阴影效果

3D小球

纸张仿真效果

彩虹边框效果

技术之旅