|
前端開發(fā)中兩個很不錯的小技巧, CSS三角形與圓角背景. 的確, 它們都可以通過圖片來實(shí)現(xiàn), 但, 拋開用代碼實(shí)現(xiàn)可以減小圖片加載量不說, 當(dāng)你遇到三角形或圓角背景下還有一層非純色背景時, 你又不得不考慮IE6 png兼容問題, 嗯, IE6,萬惡之源. 此時, CSS三角形及圓角背景將是上佳選擇.
查看演示: 點(diǎn)此查看DEMO CSS圓角背景
通過改變層疊元素的margin值實(shí)現(xiàn)圓角效果.當(dāng)然,有人會說不用這么麻煩,CSS3幾句代碼就可以搞定,但目前來說不實(shí)用,支持的瀏覽器沒幾個.
CSS部分
.r_top, .r_bottom {display:block; background:transparent; font-size:1px}/*左上右上角和左下右下角的容器*/
.r_a, .r_b, .r_c, .r_d {display:block; overflow:hidden}/*四個圓角*/
.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知識庫:CSS技巧之圓角背景與三角形,轉(zhuǎn)載需保留來源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請第一時間聯(lián)系我們修改或刪除,多謝。