集思博客

CSS圆角样式有很多，方法也很简单，比如：

<div id="a123">
【内容】
</div>

#a123{
border-radius:10px;
}

上面的样式即可实现半径为10px的圆角，详细请查看CSS3属性“border-radius”的用法，这里着重介绍兼容性高的CSS2.0实现圆角的方法。

自由宽度高度：

<div id="top_left123">
<div id="top_right123">
<div id="bottom_left123">
<div id="bottom_right123">
【内容】
</div>
</div>
</div>
</div>

Body{margin:0;padding:0; text-align:center; padding-top:10px;}
#top_left123{background:#e1eff8 url(top_left.jpg) left top no-repeat; text-align:left; width:500px; margin:auto;}
#top_right123{background:url(top_right.jpg) right top no-repeat;}
#bottom_left123{background:url(bottom_left.jpg) left bottom no-repeat;}
#bottom_right123{background:url(bottom_right.jpg) right bottom no-repeat;}
#bottom_right123{padding:10px;}

实现如图的效果：

最里面的#bottom_right层是放置内容的，所以内容层的填充#bottom_right{padding:10px;}要在这层实现。

上面的圆角实现需要嵌套了四层DIV才能实现任意宽度高度自适应，如果对宽度自适应没有要求可以看下面的。

<div id="main123">
<div id="top123"></div>
<div id="content123">
【内容】
</div>
<div id="bottom123"></div>

#main123{margin:0 auto 0 auto; width:279px;}
#top123{ background:url(top.jpg) no-repeat; width:279px; height:93px;}
#content123{ padding:20px;background-color:#e1eff8; width:239px;}
#bottom123{ background:url(bottom.jpg) no-repeat; width:279px; height:93px;}

嵌套了三层即可实现“阉割版”的CSS圆角样式，缺点是宽度是事先制作好的圆角背景，仅能在高度上自适应，宽度就有所得即有所失了。

嵌套的层次还能减少：

<div id="top123">
<div id="content123">
【内容】
</div>
<div id="bottom123"></div>
</div>

给#top加上一个padding-top:39px;即可实现了，具体样式需要自己添加一下，这里就不举例了。

原创文章转载请注明出处，转载自：[集思博客]：http://www.giisi.com

本文链接:[CSS实现圆角效果]：http://www.giisi.com/design/cssshixianyuanjiaoxiaoguo.html

集思博客订阅地址:[http://rss.giisi.com]