在我们的以前的项目中，实现圆角框往往是用背景图片来实现的，但是，当这些项目发布上线后，在维护过程中，有时需要添加一些新的需求，因为以前的项目中大量采用了圆角图片，并且这些图片全部采用了CSS sprites方式合并的图，为了不增加更多的额外工作，并且也不想用JS来添加更多的http请求，所以需要一些简单的CSS方案来解决这个问题。而我的个人爱好，也喜欢采用无图片的方式来处理这些效果。总觉得CSS能完成的工作，为什么不让它来实现呢？

　　实现原理：

　　纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了，下面这个示意图是我将其中的一个圆角进行放大后的效果。

　

　　图一

　　从上面效果图中我们可以看到其实这种圆角框是靠一个个容器堆砌而成的，每一个容器的宽度不同，这个宽度是由margin外边距来实现的，如：margin:0 5px;就是左右两侧的外边距5像素，从上到下有5条线，其外边距分别为5px，3px，2px，1px，依次递减。因此根据这个原理我们可以实现简单的html结构和样式。

　　1、Html结构层：

　　代码

1<div　class="sharp　color1">
2　　　　　　　<b　class="b1"></b><b　class="b2"></b><b　class="b3"></b><b　class="b4"></b>　
3　　　　　　　<div　class="content">文字内容</div>
4　　　　　　　</div>
5　　　　　　　<b　class="b5"></b><b　class="b6"></b><b　class="b7"></b><b　class="b8"></b>　　　
6</div>

.

• 上一篇:用CSS制作透明圆角化背景图片
• 下一篇:CNNIC域名新政 域名注册商的业务普遍受到影响

TAG: CSS 圆角框