不用flash，不用JS，僅僅CSS3就可以繪制一副精美的圖，實現(xiàn)并不復雜，代碼也不會很多，而且效果很贊。
看到這幅圖，該如何著手呢？了解border-radius、box-shadow的具體使用方法后，你會發(fā)現(xiàn)原來竟如此簡單。
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的值來調(diào)測，勾畫外形，然后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模型的層次一樣，外陰影會在對象背景之下，內(nèi)陰影會在邊框之下背景之上。所以整個層級就是：邊框>內(nèi)陰影>背景圖片>背景顏色>外陰影。因為大家都知道，我們的背景圖片是在背景顏色之上的。
如圖，肉的繪制完整代碼如下。
這里需要注意的是CSS :before選擇器和CSS :after 選擇器的使用，不要忘了加上這句：display:block。
是不是很簡單，如法炮制，玉米，千葉豆腐，花蛤，白果……是不是可以性手拈來呢。
