css圓角漸進增強體現方式一

來源:互聯網
上載者:User

              目前除了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屬性      

(註:若有錯誤請多多指教)                                                            

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.