css3.0:border-radius 圓角邊框

julyfire 2011-09-03

展開(kāi)全文

在css3.0中，又添加了一個(gè)新的屬性border-radius，使用border-radius這個(gè)屬性可以實(shí)現(xiàn)圓角邊框的效果。除IE和遨游外，目前有Firefox ，Safari，Chrome，Opera支持該屬性，其Safari，Chrome，Opera是支持最好的，依照了w3c的標(biāo)準(zhǔn)，僅僅使用 border-radius，就可以實(shí)現(xiàn)效果，無(wú)需加入前綴-webkit。而火狐依然需要加上前綴-moz。
即：
Firefox支持border-radius(圓角)：-moz-border-radius:10px;

webkit內(nèi)核的Safari和Chrome支持border-radius(圓角)：-webkit-border-radius:10px;

Opera支持border-radius(圓角)：border-radius:10px;

IE不支持border-radius(圓角)

效果圖：（IE和遨游不支持！）

代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圓角效果border-radius</title>
<style type="text/css">
body,div{margin:0;padding:0;}
.border{width:200px;border:10px solid gray;height:20px;
-moz-border-radius:10px;/*僅Firefox支持，實(shí)現(xiàn)圓角效果*/
-webkit-border-radius:10px;/*僅Safari,Chrome支持，實(shí)現(xiàn)圓角效果*/
-khtml-border-radius:10px;/*僅Safari,Chrome支持，實(shí)現(xiàn)圓角效果*/
border-radius:10px;/*僅Opera，Safari,Chrome支持，實(shí)現(xiàn)圓角效果*/
}
</style>
</head>
<body>
<div class="border">border radius</div>
</body>
</html>

再此我們還可以隨意指定圓角的位置，上左，上右，下左，下右四個(gè)方向。
在firefox、webkit內(nèi)核的Safari，Chrome和 Opera的具體書(shū)寫(xiě)格式如下：

上左效果：

-moz-border-radius-topleft / -webkit-border-top-left-radius / border-top-left-radius 上左

上右效果：

-moz-border-radius-topright / -webkit-border-top-right-radius / border-top-right-radius 上右

下左效果：

-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius / border-bottom-left-radius 下左

下右效果：

-moz-border-radius-bottomright / -webkit-border-bottom-right-radius /border-bottom-right-radius 下右

然后我們可以做些效果：
例如常見(jiàn)的標(biāo)題欄僅僅需要在上面用到圓角效果，如圖：

代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圓角效果border-radius</title>
<style type="text/css">
.border{width:120px;border:15px solid gray;height:20px;
background:gray;color:#fff;
-moz-border-radius-topright:15px;
-moz-border-radius-topleft:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-top-left-radius:15px;
border-top-right-radius:15px;
border-top-left-radius:15px;
}
</style>
</head>
<body>
<div class="border">border radius</div>
</body>
</html>

代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圓角效果border-radius</title>
<style type="text/css">
.border{width:120px;border:15px solid gray;height:20px;
background:gray;color:#fff;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
}
</style>
</head>
<body>
<div class="border">border radius</div>
</body>
</html>

陰影效果

-webkit-box-shadow: #000 0px 0px 10px

這個(gè)代碼非常不錯(cuò)可以做DIV投影。代碼分析，第一個(gè)0PX是往右移動(dòng)多少像素，第二個(gè)0PX往下移動(dòng)多少像素最后一個(gè)是投影大小。

萬(wàn)變不離其宗，僅僅需要改下的border-radius的方向，就可以實(shí)現(xiàn)一些很有用的效果，代碼變的越來(lái)越簡(jiǎn)單。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶(hù)發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

css3.0:border-radius 圓角邊框