div+css做圓角矩形【更新版】

來源:互聯網
上載者:User

  今天看了下Think的圓角矩形的div+css實現法。他大致是這樣做的。

  根據margin的邊距一點一點累加,或者累減。相對實現起來效果還算不錯!就練習,研究了一下~

 

  html part

 

<!-- round main --><div id="round">                    <!-- r_top --->                <div class="r_top">                        <em class="r_a"></em>                        <em class="r_b"></em>                        <em class="r_c"></em>                        <em class="r_d"></em>                </div>                 <!-- //r_top  end --->                                     <!-- r_box --->                <div class="r_box">                    這是一個圓角矩形!<br />                    這是一個圓角矩形!<br />                    這是一個圓角矩形!<br />                    這是一個圓角矩形!<br />                    這是一個圓角矩形!<br />                    這是一個圓角矩形!<br />                </div>                 <!-- //r_box  end --->                                    <!-- r_bottom --->                <div class="r_bottom">                         <em class="r_d"></em>                        <em class="r_c"></em>                        <em class="r_b"></em>                        <em class="r_a"></em>                               </div>                   <!-- //r_bottom  end--->                          </div>    <!-- // round main end-->

 

 

 

   css part

div,em{ margin:0; padding:0;}#round{ width:500px; margin:0px 20px; }.r_top,.r_bottom{ display:block; font-size:1px;}.r_a,.r_b,.r_c,.r_d{ display:block; overflow:hidden; }.r_a,.r_b,.r_c{ height:1px;}.r_b,.r_c,.r_d{background:#CCFF66; }.r_box{ background:#CCFF66; padding-left:10px; padding-right:10px;}.r_a{ margin:0 5px; }.r_b{ margin:0 3px; border-width:0 2px; }.r_c{ margin:0 2px; }.r_d{ height:2px; margin:0 1px; }

 

  測試一下相容性。目前還可以。還沒發現什麼大的問題~~。

 

為了更好的理解,先用簡單的代碼為例。XHTML代碼:<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>CSS代碼:b{display:block;}.b1,.b2,.b3,.b4{overflow:hidden;height:1px;border-left:1px solid #000;border-right:1px solid #000;}.b1{margin:0 5px;background:#000;}.b2{margin:0 3px;border-width:0 2px;}.b3{margin:0 2px;}.b4{height:2px;margin:0 1px;}

相關文章

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.