兼容性极好的圆角边框

一、层级组建圆角 

　　这是在网上看到比较好的兼容性的圆角边框，详见" 圆角边框 "。

　　现在要弄圆角边框，一般都是直接用border_radius，但是我们都很清楚这是CSS3的属性，兼容性不是那么完善，在ie8以及ie8以下的浏览器都是无效的，呈现出来的都是直角。

　　所以很多时候如果要做到兼容，很多时候会采用“滑动门”技术。

　　不过根据上面我收藏的代码可能会稍微多点，但也不失为一种纯CSS的圆角边框的方法。

　　而下面是我即将要改造到项目当中的，详见" 项目中的圆角边框 ”。

 

二、CSS sprite 圆角

　　圆角矩形样式的设计原理源于九宫格技术，在一个3*3的表格中，左上、右上、右下、左下分别放入4个圆角图案，内容放置在中间的方格中，其上下左右4个方向的方格可分别放入用于拉伸的图案，最终形成了一种可任意变化大小的圆角方框。

 

　　原理如上所述，效果：CSS sprite圆角 ，源代码

转自：http://hi.baidu.com/ipqyygysai/item/9d4cd40f989244c22f4c6b6d

 

 三、固定宽度的纯色圆角矩形

在众多圆角技术中, 固定宽度的圆角矩形应该是最容易实现的, 只需要2个图片以及一段简单的html代码. 

<div class="wrapper">
    <h1>标题</h1>
    <p>内容</p>
</div> 

 

.wrapper{width:181px;background:#8cc355 url(../images/bottom.gif) no-repeat left bottom;}
.wrapper h1{padding:10px 20px 0 20px;background:url(../images/top.gif) no-repeat left top;}
.wrapper p{padding:0 20px 10px 20px;} 

 

所需要的图片：

　　　　　　　　   

　　      　　　　　　　　top.gif                              bottom.gif

效果图如下：

　　　　　　　　

这种方法适用于宽度固定, 高度自适应的纯色圆角矩形. 

 

四、固定宽度的非纯色圆角矩形

这个方法是上一个方法的延伸, 这次我们不在容器上定义背景色, 而是定义重复的背景图片. 

<div class="wrapper">
    <h1>标题</h1>
    <p>内容</p>
</div> 

.wrapper{width:183px;background:url(../images/tile.gif) repeat-y center;}
.wrapper h1{padding:20px 20px 0 20px;background:url(../images/top.gif) no-repeat left top;}
.wrapper p{padding:0 20px 20px 20px;background:url(../images/bottom.gif) no-repeat left bottom;} 

所需图片如下：

　　　　              

　　　　　　　　top.gif                                    bottom.gif                          tile.gif

效果图：

　　　　

 

五. 滑动门技术(Sliding Doors)

前面的两种圆角矩形都是固定宽度的,只能在垂直方向上自适应增长(或水平方向上), 如果需要同时在垂直方向与水平方向上自适应增长尺寸的话, 很显然前两种方法不适用. 这时我们就可以采用所谓的滑动门技术.

原理: 

Top-Left.gif 与 Bottom-Left.gif 都是大图像, Top-Right.gif 和 Bottom-Right.gif 都是小图像, 小图像在大图像上根据尺寸进行自动滑动以适应内容. 
该方法用到2组4个图片: 1组Top图片构成顶部圆角, 1组Bottom图片构成底部圆角以及主体. 注意容器的最大高度和宽度不能超过图片的最大高度和宽度. 

图片的结构位置: 

html代码大致如下: 

<div class="wrapper">
    <div class="box-outer">
        <div class="box-inner">
            <h1>标题</h1>
            <p>内容</p>
        </div>
    </div>
</div>

CSS代码大致如下: 

.wrapper{width:20em;background:#ccc url(../images/bottom-left.gif) no-repeat left bottom;}
.box-outer{background:url(../images/bottom-right.gif) no-repeat right bottom;}
.box-inner{background:url(../images/top-left.gif) no-repeat left top;}
.wrapper h1{padding:2%;background:url(../images/top-right.gif) no-repeat right top;}
.wrapper p{padding:2%;} 

Tips: 
该方法很好的解决了容器扩展的问题, 但是要注意容器的最大尺寸不要超过背景图片所能构成的最大尺寸; 
该方法需要2组额外的没有任何语义的标签, 在结构上并不理想, 我们可以用JavaScript和DOM动态添加额外元素来避免这个问题, JavaScript不作讨论. 
滑动门适用范围很广, 以至于随处可见. 

转自：http://www.missyuan.com/thread-288784-1-1.html