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

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


圓角部分放大圖：


HTML代碼：


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


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


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


　　執(zhí)行代碼：

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


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



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


　　執(zhí)行代碼：




　　疑點(diǎn)：希奇了，為什么實(shí)際上并不是我們想要的效果？我們?cè)诳匆幌聠栴}出在哪，應(yīng)該是我們定義的第三個(gè)角的背景圖蓋住了右上cssbox_head中的角，解決的方法有兩種：
　　第一種：H2可以加一個(gè)右邊界這樣H2的背景就不會(huì)在蓋住cssbox_head的的那個(gè)角了；
　　第二種：反向思維，cssbox_head中加入一個(gè)右補(bǔ)白，這樣H2中的背景圖也不會(huì)蓋住cssbox_head中的角；
　　這里我們選用第二種方法．


　　執(zhí)行代碼：



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


　　完整的代碼：


最終效果圖



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