css3圓角邊框

css3.0:border-radius 圓角邊框

在css3.0中,又添加了一個新的屬性border-radius,使用border-radius這個屬性能夠實現圓角邊框的效果。除IE和遨遊外,目前有Firefox ,Safari,Chrome,Opera支持該屬性,其Safari,Chrome,Opera是支持最好的,依照了w3c的標準,僅僅使用border-radius,就能夠實現效果,無需加入前綴-webkit。而火狐依然須要加上前綴-moz。
即:
Firefox支持border-radius(圓角):-moz-border-radius:10px;

webkit內核的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.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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支持,實現圓角效果*/
-webkit-border-radius:10px;/*僅Safari,Chrome支持,實現圓角效果*/
-khtml-border-radius:10px;/*僅Safari,Chrome支持,實現圓角效果*/
border-radius:10px;/*僅Opera,Safari,Chrome支持,實現圓角效果*/
}
</style>
</head>
<body>
<div class="border">border radius</div>
</body>
</html>



再此咱們還能夠隨意指定圓角的位置,上左,上右,下左,下右四個方向。
在firefox、webkit內核的Safari,Chrome和 Opera的具體書寫格式以下:

上左效果:

-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  下右




而後咱們能夠作些效果:
例如常見的 標題欄 僅僅須要在上面用到圓角效果,如圖:

代碼 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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>



萬變不離其宗,僅僅須要改下的border-radius的方向,就能夠實現一些頗有用的效果,代碼變的愈來愈簡單。css

相關文章
相關標籤/搜索