CSS创建圆角框

【 tulaoshi.com - Web开发 】

　　我们接下来会创建一个xHTML页面，内含两个分别被ID为fixedBox与FlowBox的DIV所包含的两个内容区域，分别为固定宽度与不固定宽度的两个DIV，现在我们来为这两个DIV加上圆角。

　　我们所使用的理论是：在为元素添加背景时，背景图片总是显示在背景色之上；要创建单色的圆角矩形框，我们可以先创建一个正常的矩形框，然后，使用与背景色一致的圆角图片来做为这个元素的四圆角背景，就可以组成一个圆角框了。下面分两种情况—固定大小的框与流式不固定大小的框再详细说明方法。

　　为固定大小的框添加圆角

　　第一步：创建基本xHTML文档，并向其中添加少许内容

view plaincopy to clipboardprint？
div id="fixedBox"　
h2FixedBox Testing/h2　
pThis is just a test page of enpor.com./p　
/div　
div id="fixedBox"
h2FixedBox Testing/h2
pThis is just a test page of enpor.com./p
/div

　　我们现在创建了一个xHTML文档，其中有一个ID为fixedBox的DIV，我们将这个DIV创建圆角边框。接着为此文档添加基本的样式化：

view plaincopy to clipboardprint？
body, html {　
margin:0;　
padding:0;　
background:#a7a09a;　
color:#000;　
}　
body, html {
margin:0;
padding:0;
background:#a7a09a;
color:#000;
}

　　第二步：设置DIV的宽度大小与背景颜色

view plaincopy to clipboardprint？
div#fixedBox {　
width:340px;　
margin:40px;　
background:#E4ECF9;　
}　
div#fixedBox {
width:340px;
margin:40px;
background:#E4ECF9;
}

　　第三步：根据DIV的宽度来制作圆角矩形

　　由于我设置了DIV的宽度为340px，所以我现在需要制作一个宽度也为340px的圆角矩形，制作完成矩形之后，将整个矩形最上部与最下部裁切出来用作DIV的图片图，我制作了如下两张图片：

　　第四步：将图片应用于DIV背景之上

view plaincopy to clipboardprint？
div#fixedBox {　
width:340px;　
margin:40px;　
background:#E4ECF9 url(images/bottom.gif) no-repeat bottom center;　
}　
div#fixedBox {
width:340px;
margin:40px;
background:#E4ECF9 url(images/bottom.gif) no-repeat bottom center;
}div#fixedBox h2{
margin:0;
padding:2px;
background:#E4ECF9 url(images/top.gif) no-repeat top center;
}

　　上面我们将名为Bottom.gif的图片应用在DIV的最下方，再把Top.gif用在DIV的第一个元素H2之上，当然，这里我们首先要注意的问题就是不能为h2添加Margin值或者为DIV添加Padding或者Border等。

　　创建非固定宽度的圆角框

　　上面我们说过的只是创建固定宽度不固定高度的圆角框，这样需要上下两张图片，那么，现在如果我们把宽度与高度都不固定了，稍微思考一下，就会发现，这一次我们会得使用4张图片才行，每一个角一张图片才能创建出可任何收缩的圆角矩形，我们还是先来创建一个DIV容器，加入基本内容。

　　第一步：创建xHTML文档

view plaincopy to clipboardprint？
div id="flowBox"　
div class="forhelp"　
div class="forhelp2"　
h2FlowBox Testing/h2　
pThis is just a test page of enpor.com./p　
/div　
/div　
/div　
div id="flowBox"
div class="forhelp"
div class="forhelp2"
h2FlowBox Testing/h2
pThis is just a test page of enpor.com./p
/div
/div
/div

　　我是直接在上一个HTML文档中添加了如上四行，所以我不再需要为其Body设置CSS样式表，现在我们直接进入正题。

　　第二步，创建圆角

　　创建四个圆角，其圆角方向分别为左上、左下、右上、右下，我制作完成的圆角如下：

　　第三步：设置DIV的背景色

view plaincopy to clipboardprint？
div#flowBox {　
margin:40px;　
background:#C3D9FF;　
}　
div#flowBox {
margin:40px;
background:#C3D9FF;
}

　　第五步：添加圆角

　　对于不固定宽度与高度的DIV容器来说，任何一个圆角都必须能根据DIV的宽度与高度的变化来改变自己的位置，所以我们只能把在固定宽度DIV里使用的固定宽度的图片处理成为两个小图片，并且以将可以直接在H2元素上添加，现在我们为H2元素添加之后，只得到一边的圆角，还差一个圆角将可以使用H2中的Span获得，这样就解决了两个圆角了，而p元素可以提供一个圆角，再div本身一个，刚好四个圆角。

view plaincopy to clipboardprint？
div#flowBox {　
margin:40px;　
background:#C3D9FF url(images/bottom-left.gif) no-repeat bottom left;　
}　
div#flowBox h2{　
margin:0;　
padding:0;　
background:#C3D9FF url(images/top-left.gif) no-repeat top left;　
}　
div#flowBox h2 span{　
margin:0;　
display:block;　
background:#C3D9FF url(images/top-right.gif) no-repeat top right;　
}　
div#flowBox p{　
margin:0;　
padding:0;　
background:#C3D9FF url(images/bottom-right.gif) no-repeat bottom right;　
}