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;  
}

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!