css27】ie6 圆角处理

2024-04-27 14:36:12

字体：大中小

来源：转载

供稿：网友

CSS27】ie6 圆角处理

border-radius浏览器兼容性：

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。

我们都知道可以border-radius来给元素添加圆角；但是不仅ie6，ie7不支持这个，连ie8也是不支持这个属性的。如何让其它的浏览器也支持圆角呢？今天我分享一下我的做法：

原理很简单就是将四个角切下来，用绝对定位的方式分别遮住四个方角以达到圆角的效果。注意：这里的圆角需要同时将背景（也就是黄色部分）的部分切下来，不然会出现左下角的那种方角没有被遮住的情况。这是代码:

 1 <style> 2 .box { 3     position:relative; 4     width: 99px; 5     height: 99px; 6     padding:9px; 7     border: 1px solid #F00; 8     background-color: #FFF; 9     -webkit-border-radius: 10px;10         -moz-border-radius: 10px;11                  border-radius:10px;12 }13 /*以下是不支持border-radius的浏览器所需要的代码*/14 .r1, .r2, .r3, .r4 {15     position: absolute;16     height: 10px;17     width: 10px;18     background-image: url(img/r.png);19     background-repeat: no-repeat;20     overflow:hidden;   21 }22 .r1{ top:-1px; left:-1px; background-position:0 0;}23 .r2{ top:-1px; right:-1px; background-position:-10px 0;}24 .r3{ bottom:-1px; left:-1px; background-position:0 -10px;}25 .r4{ bottom:-1px; right:-1px; background-position:-10px -10px;}26 </style>

css

1  <div class="box"><i class="r1"></i><i class="r2"></i><i class="r3"></i><i class="r4"></i>2         <!--这里是其它的内容-->3 </div>

但是在ie6里面会出现四个角上会有边线的问题;

这是由于ie6在绝对定位的时候如果父级容器的高或者宽是单数,就会在right和bottom上有1像素的bug！（这个高度和宽度是innerwidth和innerheight）

如果是双数则不会出现这个问题;

这个Bug得采用js来解决,这里我就不仔细讲了，具体请看demo;

优点：1.不限制元素的大小;2.采用绝对定位，不会影响布局;3.渐进增强，对于支持border-radius的浏览器我们可以隐藏这四个角上的元素。4.兼容IE6;缺点:1.html里面需要额外添加四个多余的元素;2.css也需要添加定位的样式;3.还需要添加一个额外的图片;4.如果需要兼容ie6还得有可能还得采用Js;整个demo下载;本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。本文地址：http://www.cnblogs.com/css27/p/3620798.html如果我的文章对您有帮助：