box-shadow属性是CSS3中新增加的属性之一，能够给元素设置各种漂亮的阴影效果。在支持该属性的浏览器中，box-shadow实现的效果在以前需要写很多行的代码。不过目前只有IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。在低版本的IE浏览器中可能需要借助滤镜才能实现相应的效果。
事实上，边框阴影只是box-shadow的普通应用。随着CSS3标准逐渐成熟，业界出现了一种新的技术发展趋势：使用纯CSS3代码绘制扁平化的图标。扁平化设计是目前UI设计界的发展方向，一切设计都尽量简洁的线条色块组成。这种设计以今年发布的windows 8/8.1, iOS 7/8, Windows Phone为代表。在Android平台，从5.0版本开始，更是全部以扁平化设计为主题。
废话了一堆，开始进入正题：那么怎么用CSS3来绘制图标呢？略一思考，没有什么头绪啊！对于稍微简单一点的几何图形，那还好，矩形、方形、圆形这都不是问题。那么复杂一点的呢？什么椭圆形、弧形、三角形怎么办呵？经过一番研究，发现要绘制这些图形其实并不很难。关键是运用好几个属性：box-shadow首当其冲，用于投影不同部位的色块；其次是border和border-radius，用于实现规则和不规则几何图形；最后是transform属性和animate属性，用于变换和动画。当然，有了这些还不行，还缺少position属性和伪元素::before和::after。当一个图形分成多个组件的时候，一个元素怎么投影变换都显然不够，这时候伪元素的作用就来了。而position属性恰好用于定位好这些组件，构建出漂亮的图标。
下面以一个礼品盒为例，讲解下这些属性和元素是怎样配合工作的。先看预览图：
这个图标初略可分成几个部分：上面的两束花，左右各算一部分，这是个不规则的图形，显然要搭配border-radius才能实现。下面盒子部分分成六个部分，由于都是规则的矩形，因此不算困难。我们需要几个元素来实现这几个部分呢？三个就够了！下面六个矩形色块其实用阴影就可以办到。因为在box-shadow属性中我们可以写上多个属性值，如实现上面的功能可以如下写CSS：
|
|
效果如下：
其分解图为：
理论上，一个元素的投影可以无限多，这个在张鑫旭的博客中有讲过这种应用。将阴影的作用用到此处，可谓是恰到好处。那么盒子上的两束花怎么办呢？其实用CSS来绘制图标，有一个思想一定要牢牢记在脑海中：所有的不规则图形都是通过规则图形变换而来的！就说这两束花吧，外型上两者都是近似椭圆形，边框有点粗，一个向左倾斜45度，一个向右倾斜45度。这么一分析，左边这束花的css代码似乎可以这么写：
|
|
通过禁用掉不同的属性，查看不同的效果：
右边的那束花代码差不多，就说倾斜角度不一样而已。一个倾斜45度，一个倾斜-45度。当然，这里只是实现了基本的外形，还需要定位到具体的位置。不然的话还是一团散了架的组件。这里就牵涉到position属性定位了。一般的做法是：将基本元素设置为position:relative，而伪元素设置为position:absolute。这样伪元素围绕着基本元素进行调整。如上的礼品盒：
|
|
还有一个问题，怎么实现不同的弧形呢？border-radius属性值其实大有文章可作。通过给border-radius属性设置不同的属性值，可以实现各种弧形。其原理在张鑫旭的博客中有详细讲解。
在上面这个礼品盒的实现中，通过元素投影和::before, ::after这个三个元素完全可以实现图形中的组件。但是，当图形比较复杂，需要的组件比较多怎么办呢？一种办法是，添加自定义标签。HTML5中是支持自定义标签的。这么一来，基本标签加上自定义标签及其相应的伪元素，就有六个元素可以用了。一般而言，绝大部分图形是能够满足了。