目前除了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屬性
(註:若有錯誤請多多指教)