HTMer

研究互联网络和电脑应用技术的IT技术网。 (勤奋+智慧→理想)

« Microsoft Office 2007 SP2官方下载地址通过添加防下载字段来防止ACCESS数据库被下载的方法 »

用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.htmer.com">HTMer.Com</a></div>
<b class="htmer_circle2"></b>
<b class="htmer_circle1"></b>

</body>
</html>


欢迎转载,转载请注明:转载自HTMer [ http://www.htmer.com/ ]

本文链接地址:http://www.htmer.com/article/635.htm

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

HTMer , Powered By Z-Blog, 苏ICP备08003082号

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载本站内容必须也遵循“署名-非商业用途-保持一致”的创作共用协议.
HTM|HTML|ASP|PHP|JSP|Mysql|SQL|Dreamweaver|Flash|Fireworks|Photoshop|SEO Copyright www.HTMer.com. Some Rights Reserved. English Version