IT系统集成商

系统集成 | 虚拟化应用 | 群晖网络存储 | 视频会议 | 数据防泄密 | 技术运维

手机: 130-1534-6247   电话: 0351-2396570

css圆角矩形框

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

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

 
     
<div class="b2"><div class="b3"><div class="b4"> 
     
文字内容
     <div class="b5"><div class="b6"><div class="b7"><div class="b8"> 
 

 
b1~b4构成上面的左右两个圆角结构体,而b5~b8则构建了下面左右两个圆角结构体。而content则是内容主体,将这些全部放在一个大的容器中,并给它的一个类名sharp,用来设置通用的样式。再给它叠加了一个color1类名,这个类名用来区别不同的颜色方案,因为可能会有不同颜色的圆角框。
 
2、CSS样式:
 
 
.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidden; display:block;}
.b1,.b8{margin:0 5px;}
.b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;}
.b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;}
.b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}

将每个标签都设置为块状结构,并定义其高度为1像素,超出部分溢出隐藏。
从上面样式中我们已经看到margin值的设置,是从大到小减少的。而b1和b8的设置是一样,已经将它们合并在一起了,同样的原理,b2和b7、b3和b6、b4和b5都是一样的设置。这是因为上面两个圆和下面的两个圆是一样,只是顺序是相对的,所以将它合并设置在一起。有利于减少CSS样式代码的字符大小。后面三句和第二句有点不同的地方是多设置了左右边框的样式,但是在这儿并没有设置边框的颜色,这是为什么呢,因为这个边框颜色是我们需要适时变化,所以将它们分离出来,在下面的代码中单独定义。
 
.content {border-right:1px solid;border-left:1px solid;overflow:hidden;}

也是只设置左右边框线,但是不设置颜色值,它和上面八个b标签一起构成圆角框的外边框轮廓。
 
往往在一个页面中存在多个圆角框,而每个圆角框有可能其边框颜色各不相同,有没有可能针对不同的设计制作不同的换肤方案呢,答案是有的。在我的这个应用中,可以换不同的皮肤颜色,并且设置颜色方案也并不是一件很难的事情。下面看看我是如何将它们应用到不同的颜色的。
 
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{border-color:#96C2F1;}
.color1 .b1,.color1 .b8{background:#96C2F1;}
 
注意:需要将这两句的颜色值设置为一样的,第二句中虽说是设置的background背景色,但它同样是上下边框线的颜色,这一点一定要记住。因为b1和b8并没有设置border,但它的高度值为1px,所以用它的背景色就达到了模拟上下边框的颜色了。
 
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:#EFF7FF;}
 
这儿除了b1和b8外,其它的标签都包含进来了,并且包括content容器,将它们的背景色全部设置一个颜色,这样除了线框外的所有地方都成为一种颜色了。在这儿我也用到包含选择符,给它们都加了一个color1,这是颜色方案1的类名,依照这个原理可以设置不同的换肤方案

完整例子:
 
     
 
 
 
 
     
 
         
这是最基本的圆角框,无图片,四个圆角全部采用标签绘制,兼容所有浏览器,无HACK,使用时只需添加一个class = " color1 "即可,下面的所有颜色方案你可以灵活自定义。
     
     
 
 
 
 
 


 
 
 
 
 
这是最基本的圆角框,无图片,四个圆角全部采用标签绘制,兼容所有浏览器,无HACK,使用时只需添加一个class = " color1 "即可,下面的所有颜色方案你可以灵活自定义。