不用flash，不用JS，仅仅CSS3就可以绘制一副精美的图，实现并不复杂，代码也不会很多，而且效果很赞。
看到这幅图，该如何着手呢？了解border-radius、box-shadow的具体使用方法后，你会发现原来竟如此简单。
border-radius的语法
border-radius:10px 20px 30px 40px
四个值分别表示四个角的半径（水平和垂直半径一样），如图11。
border-radius:10px 20px 30px 40px/20px 50px 30px 10px;
斜杠前面的一组四个值分别表示四个角的水平半径；斜杠后面的一组四个值分别表示四个角的垂直半径。如图7。
border-radius:10px 20px 40px/20px 50px
如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的。
border-radius的用法告诉我，它可以变幻各类造型，不得不引起我的跃跃欲试的心情。
如图，碳设置40像素大小，黑色背景，border-radius: 50%/20% 70%，形状可以自己设置border-radius的值来调测，勾画外形，然后box-shadow来分部碳的位置，以下是完整的碳绘制代码。
box-shadow的语法
{box-shadow:inset x-offset y-offset blur-radius spread-radius color}
换句说：
对象选择器{box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影 模糊半径阴影扩展半径 阴影颜色}
box-shadow和text-shadow一样可以使用一个或多个投影，如果使用多个投影时必须需要用逗号“，”分开。
图片中搭起铁架子的铁棍就是利用box-shadow的属性绘制出横竖两排整齐的烧烤架。
box-shadow:25px0 0 #999,50px0 0 #999,75px0 0 #999,100px0 0 #999,125px0 0 #999,150px0 0 #999,175px0 0 #999,200px0 0 #999,225px0 0 #999,250px0 0 #999;
如下图
非零值的border-radius将会以相同的作用影响阴影的外形，但border-image不会影响对象阴影的任何外形；对象阴影同box模型的层次一样，外阴影会在对象背景之下，内阴影会在边框之下背景之上。所以整个层级就是：边框>内阴影>背景图片>背景颜色>外阴影。因为大家都知道，我们的背景图片是在背景颜色之上的。
如图，肉的绘制完整代码如下。
这里需要注意的是CSS :before选择器和CSS :after 选择器的使用，不要忘了加上这句：display:block。
是不是很简单，如法炮制，玉米，千叶豆腐，花蛤，白果……是不是可以性手拈来呢。
