這個代碼是UDSKY推薦給我的一段用圖片版的圓角代碼，于是分析代碼寫個教程，這段代碼最大的優(yōu)點是：只使用了一張圖片，代碼簡單，很輕易上手．不足之處在于做這種圓角BOX所在的背景區(qū)為單一色！還是直入正題吧！

　　預備一張圖片（我們要使用的那張背景圖，四個角都是這張背景圖四個部位顯示出來的）．最初學習圓角時，我承想過用一張四分之一的圓，然后背景圖旋轉(zhuǎn)／翻轉(zhuǎn)不就可以用以用在四個角上了吧，但是CSS中沒有這種功能，只好放棄這種不實際的想法！


圓角部分放大圖：


HTML代碼：


　　思路：盒子cssbox內(nèi)放入兩個box，上部分box做成兩個角（cssbox_head右角，H2左角），下部分box也做一個角的背景圖（左角）．cssbox_body內(nèi)一個右下角．


第一步：
　　這一步是最簡單的，在一個盒子中定義一個右下角的背景圖片．
　　CSS代碼


　　瀏覽器中看到的效果見下圖：


　　執(zhí)行代碼：

第二步
　　我們定義右上角的樣式，這一步也不難做到，因為定義背景圖定義在右上，背景圖圓角外部分又不是透明，而是白色，所以白色區(qū)蓋住cssbox_body的綠色部分．
　　CSS代碼


　　瀏覽器中看到的效果見下圖：



第三步
　　經(jīng)過以上的兩步我們已經(jīng)做了出兩個角了，在接著做第三個角，定義在H2中也就是左上角．為了美觀一些，我們在H2中加入補白10PX,
　　CSS代碼


　　執(zhí)行代碼：




　　疑點：希奇了，為什么實際上并不是我們想要的效果？我們在看一下問題出在哪，應該是我們定義的第三個角的背景圖蓋住了右上cssbox_head中的角，解決的方法有兩種：
　　第一種：H2可以加一個右邊界這樣H2的背景就不會在蓋住cssbox_head的的那個角了；
　　第二種：反向思維，cssbox_head中加入一個右補白，這樣H2中的背景圖也不會蓋住cssbox_head中的角；
　　這里我們選用第二種方法．


　　執(zhí)行代碼：



第四步
　　這一步和第三步很相似，這里就不會在犯錯誤了，根據(jù)實際情況只能選用第一種方法．
　　css代碼


　　完整的代碼：


最終效果圖



　　終于完成我們的＂大作＂了！從上面我們可以看出，定義這種效果的樣式是先從父元素到子元素定義的，也就是從外層向內(nèi)層定義，這是因為，越是內(nèi)層的的圖／背景，它在顯示時確是在外層的．
　　在內(nèi)容區(qū)假如P或其它元素有邊界的情況下會出現(xiàn)邊界疊加現(xiàn)象，在這里只要給cssbox_body加入一個1PX下補白就可以解決這種問題的發(fā)生，關(guān)于邊界疊加見網(wǎng)站中＜邊界疊加＞這篇文章．
　　本文作者：purecss