css實現圓角圖形繪制的技巧

歡迎大家在這裡學習css實現圓角圖形繪制這裡是我們給大家整理出來的精彩內容。我相信，這些問題也肯定是很多朋友在關心的，所以我就給大家談談這個!

html

XML/HTML Code復制內容到剪貼板

Flex is a cross-platform development framework for creating rich Internet applications (RIAs). Flex enables you to create expressive, high-performance applications that run identically on all major browsers and operating systems.

css

CSS Code復制內容到剪貼板

body{background-color:#000;}

.curvedBox{

width:300px;

margin: 2510px auto 0;

}

.curvedBox .r1,.curvedBox .r2,.curvedBox .r3,.curvedBox .r4{

background-color:#fff;

display:block;

overflow:hidden;

height:1px;

font-size:1px;

}

.curvedBox .r2,.curvedBox .r3,.curvedBox .r4{

border-width:0 1px;

border-left:1px solid #fff;

border-right:1px solid #fff;

}

.curvedBox .r1{margin:0 6px;}

.curvedBox .r2{margin:0 3px;}

.curvedBox .r3{margin:0 2px;}

.curvedBox .r4{

margin:0 1px;

height:2px;

}

.curvedBox .content{

background:#fff;

border-left:1px solid #fff;

border-right:1px solid #fff;

padding:0 5px;

}

這個方法其實並不完美，其實只是利用了”無限接近”的一個概念。看放大後的圖的話，可以很清楚地看到鋸齒狀。

其實把圖片放大足夠地倍數地話，也能看到鋸齒，不過放大地倍數得相當大了。將 r1 r2 r3 r4 層疊起來，利用它們 margin(left/right) 的改變以及 border(left/right)，來實現這個近似的效果。理論上，如果 rn 足夠多的話，效果就會無限趨近圓弧。不過話又說回來了，多加這麼多的標簽和css的話，在效率上必然會存在問題，也說不上就比用圖片好到哪裡去。所以說，這只是提供一個思路，到底怎麼用，用在哪裡，還得因地制宜。

不過有第一點其實應該注意的 rn{;overflow:hidden;} 這是解決 ie 下1像素高容器的方法，ie 下當容器高度低於某些值時(如10px)，即使指定

好了，css實現圓角圖形繪制內容就給大家介紹到這裡了。希望大家繼續關注我們的網站!

相關推薦：

css中的選擇符命名的使用技巧