css3.0:border-radius 圆角边框
2014-12-02 20:10
302 查看
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的具体书写格式如下:
[b]上左效果:
![](http://hiphotos.baidu.com/zg1989bd/pic/item/634b302397a4c5ccd6cae262.jpg)
-moz-border-radius-topleft / -webkit-border-top-left-radius / border-top-left-radius 上左
上右效果:
![](http://hiphotos.baidu.com/zg1989bd/pic/item/ffed99acd240bf364a36d66e.jpg)
-moz-border-radius-topright / -webkit-border-top-right-radius / border-top-right-radius 上右
下左效果:
![](http://hiphotos.baidu.com/zg1989bd/pic/item/22d10f87a8a0b60166096e76.jpg)
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius / border-bottom-left-radius 下左
下右效果:
![](http://hiphotos.baidu.com/zg1989bd/pic/item/08eb1a1098a77941cb80c46b.jpg)
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius /border-bottom-right-radius 下右
然后我们可以做些效果:
例如常见的 标题栏 仅仅需要在上面用到圆角效果,如图:
![](http://hiphotos.baidu.com/zg1989bd/pic/item/5e2df183a75f199d0df4d227.jpg)
代码 :
<!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>
![](http://hiphotos.baidu.com/zg1989bd/pic/item/c6336e5d17e69a7cfaf2c05d.jpg)
代码:
<!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的方向,就可以实现一些很有用的效果,代码变的越来越简单。
[/b]
相关文章推荐
- border-radius 圆角边框(CSS3.0)
- CSS3边框 圆角效果 border-radius
- css3(border-radius) 边框圆角详解
- css3边框——圆角效果(border-radius)、阴影(box-shadow)、边框应用图片(border-image)
- Border-radius属性--设置圆角边框
- css3中的边框圆角border-radius的用法
- HTML5学习_day13(3)--border-radius属性(圆角边框)
- Border-radius属性--设置圆角边框
- border-radius圆角边框 正圆
- CSS3中(border-radius)边框圆角详解
- 圆角效果 border-radius——阴影 box-shadow——为边框应用图片 border-image
- border-radius是向元素添加圆角边框。
- CSS3 border-radius边框圆角
- border-radius边框圆角效果(CSS3)
- 实现CSS3中的border-radius(边框圆角)示例代码
- css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性
- CSS border-radius边框圆角
- border-radius是向元素添加圆角边框的方法
- 如何不用border-radius 写圆角边框
- 第二章:第四课 css 3.0属性border-radius设置边框圆角