|
前端開發中兩個很不錯的小技巧, CSS三角形與圓角背景. 的確, 它們都可以通過圖片來實現, 但, 拋開用代碼實現可以減小圖片加載量不說, 當你遇到三角形或圓角背景下還有一層非純色背景時, 你又不得不考慮IE6 png兼容問題, 嗯, IE6,萬惡之源. 此時, CSS三角形及圓角背景將是上佳選擇.
查看演示: 點此查看DEMO CSS圓角背景
通過改變層疊元素的margin值實現圓角效果.當然,有人會說不用這么麻煩,CSS3幾句代碼就可以搞定,但目前來說不實用,支持的瀏覽器沒幾個.
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技巧之圓角背景與三角形,轉載需保留來源!
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。