css3圆角在网页中的应用

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-08-04 17:17:15　-　阅:　-　评:0　-　积分:0

虽然css3中的圆角属性早已使用开来,但国内还是有大量业界人士不知道怎么用.网页中出现圆角的地方使用圆角图片代替的现象依然很多。其实，圆角没有想像中的那么复杂，下面就来说说css3圆角边框在网页中的应用，让网页轻松告别圆角图片.

在浏览本站网页时，细心的你可能会注意到面包屑导航和文中主体部分的外边框略显圆滑，如下图：
border-radius
不要怀疑这是不是css3中的圆角，事实上，这正是css3中的圆角。对于css3的语法及其用法，这里不做过多说明，读者可参照手册中的详细说明。这里要强调一点,对于参数值代表的方位，千万不要搞混了。为了便于读者理解，下面举例说明，源码如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>css3圆角--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="css3圆角,border-radius,css3属性,圆角属性,圆角兼容ie6">
<meta name="description" content="css3圆角,border-radius,css3属性,圆角属性,圆角兼容ie6">
<style>
div{
width:300px;
height:50px;
border:1px solid #f00;
argin-bottom:10px;
}
.one{
border-radius:5px;
}
.two{
border-radius:5px 15px;
}
.three{
border-radius:5px 15px 25px;
}
.four{
border-radius:5px 15px 25px 40px;
}
</style>
</head>
<body>
<div class="one">border-radius:5px;</div>
<div class="two">border-radius:5px 15px;</div>
<div class="three">border-radius:5px 15px 25px;</div>
<div class="four">border-radius:5px 15px 25px 40px;</div>
<p>请在非<strong style="color:#f00">ie</strong>内核下浏览</p>
</body>
</html>

点此下载→→【代码】css3圆角在网页中的应用　　

效果图:
css3圆角实例
图中很直观的显示了4种取值时的效果，1个参数时表示4个角取值都相同；2个时上左与下右值相同，上右与下左值相同；3个时依次表示，上左，上右与下左，下右；4个时就不用多说了，对应4个角。对于圆角的方位该如何快速的记住呢？margin的顺序按照顺时针即上→右→下→左,此属性也是顺时针，起点是左上角。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/css3/2013-08-04/69.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！