前端開(kāi)發(fā)中兩個(gè)很不錯(cuò)的小技巧, CSS三角形與圓角背景. 的確, 它們都可以通過(guò)圖片來(lái)實(shí)現(xiàn), 但, 拋開(kāi)用代碼實(shí)現(xiàn)可以減小圖片加載量不說(shuō), 當(dāng)你遇到三角形或圓角背景下還有一層非純色背景時(shí), 你又不得不考慮IE6 png兼容問(wèn)題, 嗯, IE6,萬(wàn)惡之源. 此時(shí), CSS三角形及圓角背景將是上佳選擇.
　　查看演示: 點(diǎn)此查看DEMO
　　CSS圓角背景
　　通過(guò)改變層疊元素的margin值實(shí)現(xiàn)圓角效果.當(dāng)然,有人會(huì)說(shuō)不用這么麻煩,CSS3幾句代碼就可以搞定,但目前來(lái)說(shuō)不實(shí)用,支持的瀏覽器沒(méi)幾個(gè).
　　CSS部分

.r_top, .r_bottom {display:block; background:transparent; font-size:1px}/*左上右上角和左下右下角的容器*/
.r_a, .r_b, .r_c, .r_d {display:block; overflow:hidden}/*四個(gè)圓角*/
.r_a, .r_b, .r_c{height:1px}
.r_b, .r_c, .r_d{background:#cf6}
.r_a {margin:0 5px}
.r_b {margin:0 3px; border-width:0 2px}
.r_c {margin:0 2px}
.r_d {height:2px; margin:0 1px}
        

        

        
        
      
        
it知識(shí)庫(kù)：CSS技巧之圓角背景與三角形，轉(zhuǎn)載需保留來(lái)源！
        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。