本著依簡單易用，易維護為原則！改進了原有的css圓角代碼！
可以產生，圓角矩形和圓角邊框！
具體使用方法！見代碼！
圓角邊框只要把div的class定義成roundeside
圓角矩形只要把div的class定義成roundedcorner
然後在文檔的最後，（記住一定要是最後）引用最後一段js代碼即可為了方便發表所以把這些代碼放到一個檔案裡面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>curvyCorners Demo</title><br /><mce:style><!--<br />html,body{<br /> height: 100%;<br /> text-align: center;<br /> font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;<br /> font-size: 12px;<br /> margin: 0px;<br />background-color: #ccc;<br />}<br /> /*下面是圓角矩形的css樣式*/<br />div.roundedcorner { width: 200px; color:white;border: 2px solid #fff; }<br />div.roundedcorner .r {display:block;background: #fff}<br />div.roundedcorner .r b {display:block;height: 1px;overflow: hidden; }<br />div.roundedcorner .r b{}<br />div.roundedcorner .r .r1{margin: 0 5px}<br />div.roundedcorner .r .r2{margin: 0 3px}<br />div.roundedcorner .r .r3{margin: 0 2px}<br />div.roundedcorner .r .r4{margin: 0 1px}<br />div.roundeside .border{}<br />/*#3a6ea5為背景色，可修改成自己想要的顏色*/<br />div.roundedcorner , div.roundedcorner .r b {background:#3a6ea5; } </p><p> /*下面是圓角邊框的css樣式*/<br />div.roundeside{ width: 200px; }<br />div.roundeside .r {display:block;background: transparent;}<br />div.roundeside .r b {height: 1px;overflow: hidden;display:block; }<br />div.roundeside .r .r1{margin: 0 4px;}<br />div.roundeside .r .r2{margin: 0 3px;background: transparent;}<br />div.roundeside .r .r3{margin: 0 2px;background: transparent;}<br />div.roundeside .r .r4{margin: 0 1px;background: transparent;} </p><p> /*#3a6ea5為邊框色，可修改成自己想要的顏色*/<br />div.roundeside .border,div.roundeside .r b{border-left: 1px solid #3a6ea5;border-right: 1px solid #3a6ea5;}<br />div.roundeside .r .r1{background: #3a6ea5;}<br />--></mce:style><style mce_bogus="1">html,body{<br /> height: 100%;<br /> text-align: center;<br /> font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;<br /> font-size: 12px;<br /> margin: 0px;<br />background-color: #ccc;<br />}<br /> /*下面是圓角矩形的css樣式*/<br />div.roundedcorner { width: 200px; color:white;border: 2px solid #fff; }<br />div.roundedcorner .r {display:block;background: #fff}<br />div.roundedcorner .r b {display:block;height: 1px;overflow: hidden; }<br />div.roundedcorner .r b{}<br />div.roundedcorner .r .r1{margin: 0 5px}<br />div.roundedcorner .r .r2{margin: 0 3px}<br />div.roundedcorner .r .r3{margin: 0 2px}<br />div.roundedcorner .r .r4{margin: 0 1px}<br />div.roundeside .border{}<br />/*#3a6ea5為背景色，可修改成自己想要的顏色*/<br />div.roundedcorner , div.roundedcorner .r b {background:#3a6ea5; } </p><p> /*下面是圓角邊框的css樣式*/<br />div.roundeside{ width: 200px; }<br />div.roundeside .r {display:block;background: transparent;}<br />div.roundeside .r b {height: 1px;overflow: hidden;display:block; }<br />div.roundeside .r .r1{margin: 0 4px;}<br />div.roundeside .r .r2{margin: 0 3px;background: transparent;}<br />div.roundeside .r .r3{margin: 0 2px;background: transparent;}<br />div.roundeside .r .r4{margin: 0 1px;background: transparent;} </p><p> /*#3a6ea5為邊框色，可修改成自己想要的顏色*/<br />div.roundeside .border,div.roundeside .r b{border-left: 1px solid #3a6ea5;border-right: 1px solid #3a6ea5;}<br />div.roundeside .r .r1{background: #3a6ea5;}</style></p><p><div class="roundedcorner" ><div >樣式1</div><div style="border: 3px solid #3a6ea5;background: #fff;color:#000" mce_style="border: 3px solid #3a6ea5;background: #fff;color:#000">具體內容<br/>wefwea</div></div><br /><br/><br /><div class="roundedcorner" id=round1><div style="padding: 3px" mce_style="padding: 3px">樣式1</div></div><br /><br/><br /><div class="roundedcorner" id=round1><div style="padding: 3px" mce_style="padding: 3px">樣式1fwaelfwefwae<br/>樣式1fwaelfwefwae<br/>樣式1fwaelfwefwae<br/>樣式1fwaelfwefwae<br/></div></div><br /><br/><br /><div class="roundeside" id=round1><div>樣式1fwaelfwefwae<br/>樣式1fwaelfwefwae<br/>樣式1fwaelfwefwae<br/>樣式1fwaelfwefwae<br/></div></div><br /><br/><br /><div class="roundeside" id=round1><div>樣式1</div></div><br /><mce:script type="text/javascript"><!--<br />function getElementsByClass(G, E, A) {<br />var D = new Array();<br />if (E == null) {<br />E = document<br />}<br />if (A == null) {<br />A = "*"<br />}</p><p>var C = E.getElementsByTagName(A);<br />var B = C.length;<br />var F = new RegExp("(^|s)" + G + "(s|$)");<br />for (i = 0, j = 0; i < B; i++) {<br />if (F.test(C[i].className)) {<br />D[j] = C[i];<br />j++<br />}<br />}<br />return D<br />}</p><p>function rc(o){<br />var rcdivs = getElementsByClass(o);<br /> for(var i=0,l=rcdivs.length;i<l;i++)<br />{<br /> rcdivs[i].innerHTML = '<b class="r"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b><div class="border">'<br /> + rcdivs[i].innerHTML<br /> + '</div><b class="r"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>';<br />}</p><p>}</p><p>rc("roundedcorner");<br />rc("roundeside");<br />// --></mce:script></p><p></body><br /></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
