纯CSS圆角框:根基的圆角框
|
序言：在我的文章《超油滑圆角框的半美满办理方案》中已经总结了七种差异的圆角框办理方案，根基上总结完了今朝收集上较量风行的圆角框实现方案。而在我的另一篇文章《无图片山顶角》中又是一个另类的实现要领。
纯CSS实现圆角框是一件各人都说烂了的变乱，我也写过两篇总结文章，为什么还会有这篇文章呢，工作是这样的。在我们的早年的项目中，实现圆角框每每是用配景图片来实现的，可是，当这些项目宣布上线后，在维护进程中，偶然必要添加一些新的需求，由于早年的项目中大量回收了圆角图片，而且这些图片所有回收了CSS sprites方法归并的图，为了不增进更多的特殊事变，而且也不想用JS来添加更多的http哀求，以是必要一些简朴的CSS方案来办理这个题目。而我的小我私人喜爱，也喜好回收无图片的方法来处理赏罚这些结果。总认为CSS能完成的事变，为什么不让它来实现呢？ 实现道理： 纯CSS方法实现圆角框的道理在收集上已经有许多人具体讲解了，下面这个表示图是我将个中的一个圆角举办放大后的结果。 
图一 从上面结果图中我们可以看到其拭魅这种圆角框是靠一个个容器堆砌而成的，每一个容器的宽度差异，这个宽度是由margin外边距来实现的，如：margin:0 5px;就是阁下两侧的外边距5像素，从上到下有5条线，其外边距别离为5px，3px，2px，1px，依次递减。因此按照这个道理我们可以实现简朴的html布局和样式。 1、Html布局层： b1~b4组成上面的阁下两个圆角布局体，而b5~b8则构建了下面阁下两个圆角布局体。而content则是内容主体，将这些所有放在一个大的容器中，并给它的一个类名sharp，用来配置通用的样式。再给它叠加了一个color1类名，这个类名用来区别差异的颜色方案，由于也许会有差异颜色的圆角框。 2、CSS样式：
将每个b标签都配置为块状布局，并界说其高度为1像素，超出部门溢出潜匿。从上面样式中我们已经看到margin值的配置，是从大到小镌汰的。而b1和b8的配置是一样，已经将它们归并在一路了，同样的道理，b2和b7、b3和b6、b4和b5都是一样的配置。这是由于上面两个圆和下面的两个圆是一样，只是次序是相对的，以是将它归并配置在一路。有利于镌汰CSS样式代码的字符巨细。后头三句和第二句有点差异的处所是多配置了阁下边框的样式，可是在这儿并没有配置边框的颜色，这是为什么呢，由于这个边框颜色是我们必要当令变革，以是将它们疏散出来，在下面的代码中单独界说。
也是只配置阁下边框线，可是不配置颜色值，它和上面八个b标签一路组成圆角框的外边框外观。 在上面的样式计划中，我已经给颜色方案留下了可以扩展的空间。我将全部的涉及到边框色的类名所有齐集在一路，用群选择符给它们配置一个边框的颜色就可以了。如下所示：
留意：必要将这两句的颜色值配置为一样的，第二句中虽说是配置的background配景致，但它同样是上下边框线的颜色，这一点必然要记着。由于b1和b8并没有配置border，但它的高度值为1px，以是用它的配景致就到达了模仿上下边框的颜色了。 此刻已经将一个圆角框描写出来了，可是有一个题目要留意，就是内容区的配景致，由于这儿是存载笔墨主体的处所。以是还必要插部下面这句话，也是聚集选择符来配置圆角内的全部配景致。
好了，我们将上面的全部代码齐集起来，就完成一个纯CSS圆角框的实例模子，在源码中，我配置了六套颜色方案，其余的颜色方案就看你的了。 
图二 为了演示结果，本模子的宽度值所有回收百分比实现的，你可以随意伸缩宽度，看看它可否顺应弹性的变革。 本模子在以下赏识器中美满通过： IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。
文章来自：http://www.cnblogs.com/binyong/ （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
