css3圆角边框
2013-12-11 17:37
381 查看
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的方向,就可以实现一些很有用的效果,代码变的越来越简单。
相关文章推荐
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
- border-radius边框圆角效果(CSS3)
- 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影
- css3学习总结2--CSS3圆角边框
- CSS3总结——边框与圆角
- 使用css3来实现边框圆角效果
- CSS3圆角边框
- CSS3--多列布局、边框颜色、圆角、渐变效果、阴影反射
- CSS3之边框圆角:border-radius
- CSS3利用border-radius实现边框圆角
- CSS3边框和圆角
- css3(border-radius)边框圆角详解
- 利用CSS3的新功能实现(椭)圆角边框和图片边框 (圆角)
- css3(border-radius)边框圆角详解
- css3-边框 圆角 阴影 等属性
- css3设置圆角边框
- CSS3简明教程-2.2.CSS3边框之 圆角border-radius
- css3(border-radius) 边框圆角详解
- CSS3 border-radius边框圆角
- CSS3下不一样的阴影、背景和圆角边框样式