您现在的位置:多问网知识中心电脑教学网页设计用CSS实现圆角边框效果的方法

用CSS实现圆角边框效果的方法

06-11 19:38:59   浏览次数:14026  栏目:网页设计
标签:网页设计教程,网页设计知识,http://www.duowen123.com 用CSS实现圆角边框效果的方法,

    我们在网页制作中常常为了页面的美观,而设计一些圆角的边框。常用的方法是事先做好圆角效果的图片,然后把图片进行分割处理。这样做的缺点就是网页中附带了好多图片,影响网页的打开速度,其实我们完全可以用CSS来实现圆角边框的效果,具体方法请接着往下看。

    用CSS实现圆角边框效果截图如下所示:

    用CSS实现圆角边框效果代码如下:

<!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=gb2312" />
<title>用CSS实现圆角边框效果的方法-HTMer</title>
<style type="text/css">
<!--
b{display:block;overflow:hidden;height:1px;}
.htmer_circle1{margin:0 2px; background:#333;}
.htmer_circle2,.content{border-color:#333;border-style:solid;border-width:0 1px;clear:both;}
.htmer_circle2{margin:0 1px;}
-->
</style>
</head>
<body>
<b class="htmer_circle1"></b>
<b class="htmer_circle2"></b>
<div class="content">用CSS实现圆角边框效果的方法——<a href="http://www.duowen123.com">HTMer.Com</a></div>
<b class="htmer_circle2"></b>
<b class="htmer_circle1"></b>
</body>
</html>,用CSS实现圆角边框效果的方法
相关热词搜索: tag: 网页设计,网页设计教程,网页设计知识,电脑教学 - 网页设计
上一篇:利用javascript进行进制转换的方法
文章评论
联系我们 | 网站地图 | 范文大全 | 管理资料 | 驾照考试 | 教学资料 | 名言大全 | 软件下载
Copyright @ 多问网 all rights reserved
学生评语_教案设计_小学语文试卷
1 2 3 4 5 6 7 8 9 10 11 12