圆角边框可以用图片实现,也可以用CSS实现。如果用图片做的话,就画好圆角然后设置成背景图片。用CSS不需要图片,直接用代码定义颜色。用图片的话,会影响网页打开速度,当然如果图片不大,影响也并不明显。用CSS不会影响网页打开速度,但是实现方法略麻烦,要写不少代码。不好讲哪个更好哪个更差,用到各自适合的地方就行了。
这里介绍两种不用图片,直接用CSS实现圆角边框的方法。两种CSS方法原理类似,都是在一个层上加二个或更多层,不过这些层只有左右边线,上边线和下边线有背景色,都有一定的长度差距差,从而呈现出圆角边框的效果。
方法一:
CSS样式定义,放在网页前部。绿色字是注释,红色字是可自行更改的颜色编码。
<style type="text/css" >
<!--1.定义框内背景色为蓝色#0080FF-->
div.RoundedCorner{background: #0080FF}
<!--2.定义方框四角的颜色#FFFFFF,应该设置成与整体页面背景色相同,才能融入背景,使框呈现出圆角形状-->
b.rtop, b.rbottom{display:block;background: #FFFFFF}
<!--3.定义圆角框边框颜色,应该设置成与1.框内背景色相同的颜色,即蓝色-->
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #0080FF}
<!--4.定义圆角弧度,直接拷贝即可-->
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style >
引用以上定义的样式,在网页中显示圆角边框。绿色字是注释。
<!--1.定义层,引用样式,生成圆角边框,直接拷贝即可-->
<div class="RoundedCorner" >
<b class="rtop" > <b class="r1" > </b > <b class="r2" > </b > <b class="r3" > </b > <b class="r4" > </b > </b >
<!--2.定义圆角框里面显示的内容,可根据需要自行修改-->
<br >CSS圆角边框,无图片实现方法 <br > <br >
<!--3.定义层,引用样式,生成圆角边框,直接拷贝即可-->
<b class="rbottom" > <b class="r4" > </b > <b class="r3" > </b > <b class="r2" > </b > <b class="r1" > </b > </b >
</div >
效果如图所示:
方法二:
首先选择一系列同色颜色,以便营造平滑的圆角效果
较深的蓝色#0a67e6
略浅的蓝色#3883ea
更浅的蓝色#478dec
较浅的蓝色#95bdf4
CSS样式定义,放在网页前部。红色字是可自行更改的颜色编码。
<style type="text/css" >
.R{
display:block;
}
.R *{
display:block;
height:1px;
overflow:hidden;
background: #0a67e6;
}
.R1{
border-right:1px solid #95bdf4;
padding-right:1px;
margin-right:3px;
border-left:1px solid #95bdf4;
padding-left:1px;
margin-left:3px;
background: #478dec;
}
.R2{
border-right:1px solid #e6effc;
border-left:1px solid #e6effc;
padding:0px 1px;
background: #3883ea;
margin:0px 1px;
}
.R3{
border-right:1px solid #3883ea;
border-left:1px solid #3883ea;
margin:0px 1px;
}
.R4{
border-right:1px solid #95bdf4;
border-left:1px solid #95bdf4;
}
.R5{
border-right:1px solid #478dec;
border-left:1px solid #478dec;
}
.R_content{
padding:0px 5px;
background: #0a67e6;
}
</style >
引用以上定义的样式,在网页中显示圆角边框。绿色字是注释。
<!--1.定义层,引用样式,生成圆角边框,直接拷贝即可-->
<div >
<b class="R" >
<b class="R1" > <b > </b > </b >
<b class="R2" > <b > </b > </b >
<b class="R3" > </b >
<b class="R4" > </b >
<b class="R5" > </b >
</b >
<div class="R_content" >
<!--2.定义圆角框里面显示的内容,可根据需要自行修改 -->
<br >CSS圆角边框,无图片实现方法 <br > <br >
<!--3.定义层,引用样式,生成圆角边框,直接拷贝即可-->
</div >
<b class="R" >
<b class="R5" > </b >
<b class="R4" > </b >
<b class="Ry3" > </b >
<b class="R2" > <b > </b > </b >
<b class="R1" > <b > </b > </b >
</b >
</div >
效果如图所示:
这里介绍两种不用图片,直接用CSS实现圆角边框的方法。两种CSS方法原理类似,都是在一个层上加二个或更多层,不过这些层只有左右边线,上边线和下边线有背景色,都有一定的长度差距差,从而呈现出圆角边框的效果。
方法一:
CSS样式定义,放在网页前部。绿色字是注释,红色字是可自行更改的颜色编码。
<style type="text/css" >
<!--1.定义框内背景色为蓝色#0080FF-->
div.RoundedCorner{background: #0080FF}
<!--2.定义方框四角的颜色#FFFFFF,应该设置成与整体页面背景色相同,才能融入背景,使框呈现出圆角形状-->
b.rtop, b.rbottom{display:block;background: #FFFFFF}
<!--3.定义圆角框边框颜色,应该设置成与1.框内背景色相同的颜色,即蓝色-->
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #0080FF}
<!--4.定义圆角弧度,直接拷贝即可-->
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style >
引用以上定义的样式,在网页中显示圆角边框。绿色字是注释。
<!--1.定义层,引用样式,生成圆角边框,直接拷贝即可-->
<div class="RoundedCorner" >
<b class="rtop" > <b class="r1" > </b > <b class="r2" > </b > <b class="r3" > </b > <b class="r4" > </b > </b >
<!--2.定义圆角框里面显示的内容,可根据需要自行修改-->
<br >CSS圆角边框,无图片实现方法 <br > <br >
<!--3.定义层,引用样式,生成圆角边框,直接拷贝即可-->
<b class="rbottom" > <b class="r4" > </b > <b class="r3" > </b > <b class="r2" > </b > <b class="r1" > </b > </b >
</div >
效果如图所示:
![](http://image1.club.sohu.com/pic/41/d3/hxzy3a5b0573ace1a5f7.jpg)
方法二:
首先选择一系列同色颜色,以便营造平滑的圆角效果
较深的蓝色#0a67e6
略浅的蓝色#3883ea
更浅的蓝色#478dec
较浅的蓝色#95bdf4
CSS样式定义,放在网页前部。红色字是可自行更改的颜色编码。
<style type="text/css" >
.R{
display:block;
}
.R *{
display:block;
height:1px;
overflow:hidden;
background: #0a67e6;
}
.R1{
border-right:1px solid #95bdf4;
padding-right:1px;
margin-right:3px;
border-left:1px solid #95bdf4;
padding-left:1px;
margin-left:3px;
background: #478dec;
}
.R2{
border-right:1px solid #e6effc;
border-left:1px solid #e6effc;
padding:0px 1px;
background: #3883ea;
margin:0px 1px;
}
.R3{
border-right:1px solid #3883ea;
border-left:1px solid #3883ea;
margin:0px 1px;
}
.R4{
border-right:1px solid #95bdf4;
border-left:1px solid #95bdf4;
}
.R5{
border-right:1px solid #478dec;
border-left:1px solid #478dec;
}
.R_content{
padding:0px 5px;
background: #0a67e6;
}
</style >
引用以上定义的样式,在网页中显示圆角边框。绿色字是注释。
<!--1.定义层,引用样式,生成圆角边框,直接拷贝即可-->
<div >
<b class="R" >
<b class="R1" > <b > </b > </b >
<b class="R2" > <b > </b > </b >
<b class="R3" > </b >
<b class="R4" > </b >
<b class="R5" > </b >
</b >
<div class="R_content" >
<!--2.定义圆角框里面显示的内容,可根据需要自行修改 -->
<br >CSS圆角边框,无图片实现方法 <br > <br >
<!--3.定义层,引用样式,生成圆角边框,直接拷贝即可-->
</div >
<b class="R" >
<b class="R5" > </b >
<b class="R4" > </b >
<b class="Ry3" > </b >
<b class="R2" > <b > </b > </b >
<b class="R1" > <b > </b > </b >
</b >
</div >
效果如图所示:
![](http://image1.club.sohu.com/pic/fc/e0/hxzy810b24d307e8c616.jpg)
<script type="text/javascript"></script> <script src="cache/hottags_forum_cache_jsonp.txt" type="text/javascript"></script>