概述
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小球
纸张仿真效果
彩虹边框效果