CSS魔法堂：Box-Shadow没那么简单啦:)_html/css_WEB-ITnose

前言

说起box-shadow那第一个想法当然就是用来实现阴影，其实它还能用于实现其他好玩的效果的，本篇就打算说说box-shadow的那些事。

二话不说看效果

3D小球

纸张阴影(来自@张鑫旭老师)

细读属性

看到上面这么绚丽的效果，是不是迫不及待想弄清box-shadow呢？下面我们来一步步解密它吧！

概述属性语法

box-shadow: none | [,]*默认值为none:inset? && {2,4} && ?shadow pattern，默认为outset，即采用outer box-shadow。通过设置为inset时，则采用inner box-shadow。horizontal offset，阴影距离原位置的水平位移，正数表示向右移动，负数表示向左移动。vertical offset，阴影距离原位置的垂直位移，正数表示向下移动，负数表示向上移动。blur radius，默认值为0，阴影模糊度半径。spread distance，默认值为0，扩展或缩小阴影的作用面积。，阴影颜色，默认与color属性一致。

注意：我们可以同时设置多个阴影，而阴影的z-index值从左向右递减。

outer box-shadow 和 inner box-shadow怎么玩？

默认情况下采用的是outer box-shadow，当在box-shadow中添加inset关键词后，则采用inner box-shadow了，但到底它俩的效果是如何的呢？