css圆角渐进增强体现方式一

              目前除了IE678浏览器，其他浏览器对css3的圆角都支持的很给力，不得不承认很多前端工程师在圆角制作上面费了很多功夫，css3的圆角 border-radius属性方便了很多（是非常多），虽说有很多方法让ie678也支持css3里面圆角等简单属性，但个人觉得那样增加浏览器加载负担，而且处于发展阶段，在添加某些额外的属性后才恩那个正常使用，最近看到前端行业内对‘渐进增强’有很多讨论。于是最近也在圆角上面体现渐进增强(总不能等到html5,css3普及了再去使用吧，那样就玩完了)

              为了实现自增长圆角，务必将圆角图片设置长一点

              我的圆角图片：  (500px*12px)高度为圆角高度的两倍

 我的css样式：

/*圆角*/
.radius_top_ie,.radius_bot_ie {height: 6px; padding-left:10px; position:relative; overflow:hidden; z-index:3}
.radius_top_ie,.radius_top_ie_in { background:url(../../images/hr/bg/tset.png) 0 0 no-repeat\9;}
.radius_bot_ie,.radius_bot_ie_in {background:url(../../images/hr/bg/tset.png) 0 -6px no-repeat\9;}
.radius_top_ie_in {height: 100%;background-position:100% 0;}
.radius_bot_ie_in {height: 100%;background-position:100% -6px;}
.radius_top_ie {margin-bottom:-6px;}
.radius_bot_ie {margin-top:-6px;}
 /*end_圆角*/

我的html实现：

<div style="width:200px; margin:90px;">
<!--[if lt IE 9]><div class="radius_top_ie"><div class="radius_top_ie_in"></div></div><![endif]-->
<div style="width:198px; height:200px; background:#f2f9ff; border:1px solid #5e92cc; border-radius:4px; "></div>
<!--[if lt IE 9]><div class="radius_bot_ie"><div class="radius_bot_ie_in"></div></div><![endif]-->
</div>

当IE处于IE9以下的版本时候采用html+css方式显示圆角， 其他则忽略相关代码直接用border-radius属性      

（注：若有错误请多多指教）