任鸟飞网站设计博客

圆角是常用的设计元素之一，但HTML元素都是以方形的形式存在，但是通过给这些元素设置背景图片，就能创建圆角效果。

圆角越灵活，则对应的CSS代码就越复杂，我们的目标是利用最小的图片及最少的代码实现圆角效果。

制作圆角效果步骤：

1. 圆角的灵活性。例如可否横向、纵向延伸。
2. 需要哪些HTML元素。
3. 制作圆角图片。
4. 编写CSS代码。

虽然制作圆角的方法有很多，但这里介绍一个我自己想出来的方法 —— 利用一个圆形来制作边框圆角。

这个方法的好处是只需要一个圆形图片，然后对所需要的HTML元素进行样式定义。

我们这里用的圆角图片是一个右侧所示的圆形图片。圆角图片： 。

利用一个圆形来制作边框圆角效果预览：

制作过程：

1. 利用绘图软件绘制一个20×20的带有边框的圆角。
   
2. 合理选用HTML元素，并确定这些元素所在的位置及大小。
   HTML元素示意图
   HTML代码：

   <div class="gray-box">
   <span class="top-left"></span>
   <h4>制作边框圆角</h4>
   <span class="top-right"></span>
   <p>圆角是常用的设计元素之一，但HTML元素都是以方形的形式存在。<br />
     <a href="http://www.renniaofei.com">任鸟飞网页设计</a></p>
   <span class="bottom-left"></span>
   <span class="more"><a href="http://www.renniaofei.com">更多资料</a></span>
   <span class="bottom-right"></span></div>

3. 对上面的HTML元素进行样式定义。CSS代码：

   .gray-box {
   	width: 300px;
   	position: relative;
   	height: 200px;
   }
   .gray-box .top-left {
   	background-image: url(bg.gif);
   	background-repeat: no-repeat;
   	background-position: left top;
   	height: 10px;
   	width: 10px;
   	display: block;
   	position: absolute;
   	left: 0px;
   	top: 0px;
   }
   .gray-box h4 {
   	width: 280px;
   	display: block;
   	position: absolute;
   	left: 10px;
   	top: 0px;
   	border-top: solid 1px #ccc;
   	height: 20px;
   	background-color: #eee;
   	z-index: 999;
   	padding-top: 5px;
   	color: #003366;
   }
   .gray-box .top-right {
   	background-image: url(bg.gif);
   	background-repeat: no-repeat;
   	background-position: right top;
   	height: 10px;
   	width: 10px;
   	display: block;
   	position: absolute;
   	top: 0px;
   	right: 0px;
   }
   .gray-box .bottom-left {
   	background-image: url(bg.gif);
   	background-repeat: no-repeat;
   	background-position: left bottom;
   	height: 10px;
   	width: 10px;
   	display: block;
   	position: absolute;
   	left: 0px;
   	bottom: 0px;
   }
   .gray-box .bottom-right {
   	background-image: url(bg.gif);
   	background-repeat: no-repeat;
   	background-position: right bottom;
   	height: 10px;
   	width: 10px;
   	display: block;
   	position: absolute;
   	right: 0px;
   	bottom: 0px;
   }
   .gray-box .more {
   	width: 280px;
   	position: absolute;
   	right: 10px;
   	bottom: 0px;
   	display: block;
   	background-color: #EEEEEE;
   	border-bottom: solid 1px #ccc;
   	text-align: right;
   	padding-bottom: 8px;
   }
   .gray-box p {
   	position: absolute;
   	top: 10px;
   	background-color: #EEEEEE;
   	border-right: solid 1px #ccc;
   	border-left: solid 1px #ccc;
   	width: 278px;
   	height: 140px;
   	padding: 20px 10px;
   }

 
利用一个圆形来制作边框圆角效果 —— 预览
利用一个圆形来制作边框圆角效果 —— 下载