>>  常见问题
>>  课程问题
>>  免费试学



  
 
所在位置:石家庄动漫软件职业技术学校 >> 招生问答 >> 课程问题
圆角边框CSS如何实现?
作者: 来源: 点击数:1513 更新时间:2013-2-13 15:57:26   

圆角边框可以用图片实现,也可以用 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="r4"></b></b>
<!--2.定义圆角框里面显示的内容,可根据需要自行修改-->
<br>CSS 圆角边框,无图片实现方法<br><br>
<!--3.定义层,引用样式,生成圆角边框,直接拷贝即可-->
class="r3"></b><b
<b class="rbottom"><b class="r1"></b></b> </div> 效果如图所示:
class="r4"></b><b
class="r3"></b><b
class="r2"></b><b

你还有什么方法?


      友情提示:如果您正在为就业难而烦恼,如果您想跳槽转行而不知该如何决择,如果您因激烈的职业竞争而想充电学习,请点击在线客服,或者拨打0311—87162121 87162112我们会有专业的职业规划老师为您解除困惑!

 

上一篇:网站优化如何去做?
下一篇:如何学习Linux更有效?
[在线报名] [打印此文] [关闭窗口]
版权所有 石家庄清美动漫软件职业技术学校
传真:0311-87162110-8010 邮箱:hbbeneter@sina.com 冀ICP备16001955号-2
校址:石家庄市建设北大街东海国际 电话:400-800-5730 0311-87162121 87612112