圓角怎麼寫
兼容所有瀏覽器的圓角代碼其實用圖片代替最簡單。
DIV+CSS圓角：
<style type="text/CSS">
div#nifty{margin:0;background:#9BD1FA}
p {padding:10px}
div.rtop {display:block;background:#fff}
div.rtop div {display:block;height:1px;overflow:hidden;background:#9BD1FA}
div.r1{margin:0 5px}
div.r2{margin:0 3px}
div.r3{margin:0 2px}
div.rtop div.r4 {margin:0 1px;height:2px}
</style>
<div id="nifty">
<div class="rtop">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
<p>div + css 圓角矩形</p>
<div class="rtop">
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
</div>
2. CSS圓角怎麼寫出來#xsnazzy h1, #xsnazzy strong, #xsnazzy p {margin:0 10px; letter-spacing:1px;} #xsnazzy h1 {font-size:2.5em; color:#fff;} #xsnazzy strong {font-size:2em;color:#06a; border:0;} #xsnazzy p {padding-bottom:0.5em;} #xsnazzy strong {padding-top:0.5em;} #xsnazzy {background: transparent; margin:1em;} .xtop, .xbottom {display:block; background:transparent; font-size:1px;} .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;} .xb1, .xb2, .xb3 {height:1px;} .xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;} .xb1 {margin:0 5px; background:#08c;} .xb2 {margin:0 3px; border-width:0 2px;} .xb3 {margin:0 2px;} .xb4 {height:2px; margin:0 1px;} .xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-width:0 1px;} Snazzy Borders Based on Nifty Corners By Alessandro Fulciniti.it/esempio/nifty/ Rounded borders without images Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 把這段代碼複製運行一下你就完全明白了。
3. 請問CSS中怎麼寫一個圓角<html>
<head>
<title>css圓角效果--網站每日新</title>
<meta ; charset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>；無圖片實現圓角框<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>
4. 圓角邊框最簡潔最兼容的寫法怎麼寫CSS圓角邊框 純CSS製作[轉] 這也是我以後一定要用的 -border-radius:11px;
-webkit-border-radius:11px;
border-radius:11px;
padding:5px;
以上的css屬性控制一個div就有圓角框了，但部分瀏覽器不支持。
第二種：
將背景直接用一個圓角圖片替換，此方法最簡單
6. html怎麼寫圓角邊框css圓角效果 div.RoundedCorner{background: #9BD1FA} b.rtop, b.rbottom{display:block;background: #FFF} b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA} b.r1{margin: 0 5px} b.r2{margin: 0 3px} b.r3{margin: 0 2px} b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px} 無圖片實現圓角框。
7. html怎麼寫圓角邊框<html> <head> <title>css圓角效果</title> <meta ; charset=utf-8"> <style type="text/css"> div.RoundedCorner{background: #9BD1FA} b.rtop, b.rbottom{display:block;background: #FFF} b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA} b.r1{margin: 0 5px} b.r2{margin: 0 3px} b.r3{margin: 0 2px} b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px} </style> </head> <body> <div class="RoundedCorner"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> <br>；無圖片實現圓角框<br><br> <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> </div> </body> </html>
記得采納啊
