如何在ie6下面设计出圆角，全兼容的
?
妈的，看看人家css3多么简单，一个css命令就够了，但是呢，你还得考虑那个万恶的ie6，谁让我的网站是面对的农民伯伯，估计用的都是ie6.
?
首先我针对类似于这样的圆角。如下：
?
先是做 235px长 1px像素高的图片（content_bar.png），然后平铺y方向（这里的容器高位35px），当然平铺之后是长方形的。
接着做两个图片，长和宽都是35px，大部分是透明图片，只有左边的有一部分圆弧外面的是白色，我这里为了让大家看得清楚，把图片反色了，里面的黑色其实在网页上是白色。聪明的读者肯定知道了，另外一张图片肯定就是与之水平翻转的图片了。正好是标题的左右角。
? （blocktitle_left_corner.png）
?
接下来，我是这样写的html。
?
?
?这里的路径是从apache的根目录开始的。这里貌似不能写相对路径啊啥的，一定要绝对的。我写了相对的没效果。为什么呢，貌似behavior的属性比较特殊，其路径相对的不是当前css文件，而是加载该css文件的页面，那我们也不知道我们到底加载的哪个页面，就写绝对路径了。如果要换目录这里也要改的。
?
如果这个时候你打开ie6，会发现根本看不到透明图片，这是因为在ie6下，其浮动模型是不一样的。那个h3不会无视那两个角，结果就出现在了两个角的下方，所以你没看到效果。这个时候，再修改以前的css
?
.xo-block .xo-blocktitle-mask-left { height: 35px; width: 35px; float: left; background-image: url("../img/blocktitle_left_corner.png"); _position: absolute; /*css mhack*/ _top: 0px; _left: 0px;}.xo-block .xo-blocktitle-mask-right { height: 35px; width: 35px; float: right; background-image: url("../img/blocktitle_right_corner.png"); _position: absolute; _top: 0px; _right: 0px;}.xo-blocktitle { _position: relative; height: 35px; background: url("../img/content_bar.png") repeat-y; _overflow: hidden; /*ie6*/ _width: 100%; /*ie6，否则会被background img撑大*/}.xo-blocktitle h3 { line-height: 35px; color: #000099; text-transform: uppercase; letter-spacing: 3px; font-size: 18px; padding-left: 30px; text-indent: -1000px;}?
看到了吗？者利用了css hack的技巧。那些css属性名前加_的就是css hack，只写给ie6看的。你看到.xo-blocktitle的position为relative，那么其子元素如果绝对定位的话，其left和top就会针对.xo-blocktitle的。这样让两个角绝对定位就达到了h3无视那两个角的目的。注意.xo-blocktitle里面的两个css hack，这个是为什么呢？因为我们之前设置了一个behavior属性，那个属性会暗地里把我们的h3的width改成260px，好像是100%的长度。接着那个h3有一个属性是padding-left:30px那么按照css盒模型，其占用的宽度就相当于是290px。然后在ie6下父元素被子元素给撑开了，所以.xo-blocktitle就被撑开到了290px，导致了样式错误。解决方案是不要让.xo-blocktitle被撑开，就需要用设定宽度再overfllow:hidden的方式，这样，子元素撑开的部分就被切掉了。而且因为.xo-blocktitle设置了宽度，所以.xo-blocktitle-mask-right也能正确定位的。
?
当然这只是其中一种解决方案，还有一个办法也可以奏效，而且可能更加简单
?
那就是不要做那两个角了，直接连带做一个带圆角的背景标题图片，还不要是透明的，把圆弧做好后，再把原来的背景的图案相对应的做在圆弧的外面，根本就不要什么处理了，直接拉上去就好。这种情况更适用于背景比较复杂或有明显渐变而不是纯色的情况，这类情况第一种方法是无法处理的。其实，现在想想，拿这一种方法其实更好，简单啊，而且不会产生多余的html，我真傻怎么当初没用这一种呢？不过，用第一种还是学到了不少东西的，尤其是ie6和ff的区别，看来走弯路也不见得是坏事啊！
?
?
?
?
1 楼 chensulong 2011-02-11 使用css3pie可以更快，更easy的实现全兼容圆角。 2 楼 zuoge85 2011-02-11 楼主我忍不住了，你声明的是xhtml在ie6下就是标准框模型。。。
所以其他人没乱说，是你。。。。没懂
ie5有怪异模型和。。。标准的。。。
还有你用gif做就可以透明了，png用滤镜，用你说的那个东西，如果图片太多会变慢的。
3 楼 maosuhan 2011-02-11 呵呵，我也是做了一个简单的实验，没有想到这么多模式，领教了 4 楼 chensulong 2011-02-12 不好意思，忘记说了，pie css我以前用的是beta2的，存在一个问题，当圆角元素嵌套圆角元素的时候，在IE6下就出现BUG了，不知道beta3现在修正了没有。 5 楼 zuoge85 2011-02-12 你那个图片gif完全够了....... 6 楼 vb2005xu 2011-02-12 可以看看 http://www.iteye.com/topic/610962 这个帖子 7 楼 interjc 2011-02-12 这种纯色背景在IE6下换用gif就行了，不需要js 8 楼 refar 2011-02-12 这东西我7年前就实现了。。。 9 楼 xieyongwei 2011-02-12 居然在ie6圆角实现上还这么纠集的人 还责怪人家是农民伯伯，太强大了！ 10 楼 sunlong 2011-02-13 兄弟泗洪的？ 11 楼 rainsilence 2011-02-13 大哥。。用canvas画都比你这个快。。。 12 楼 sunwt 2011-02-14 上面的达人也给出自己的方案吧，刚入此道，很想多学习学习 13 楼 xiaojing3517 2011-02-14 楼主好素质。
楼主高水平。 14 楼 happysoul 2011-02-17 http://happysoul.iteye.com/blog/606847
看这个吧 比你的还要多一些 你只是把圆角文件处理了
其实边框也是可以包括到gif文件里面的
半透明没什么太复杂的
