div+cssで角丸長方形を作る【更新版】_html/css_WEB-ITnose

今日は、Think の角丸長方形の div+css 実装を見ていきました。おおよそこれが彼がやったことです。

余裕に応じて少しずつ加算または減算します。結果は比較的良好です！練習して勉強してください〜

HTML部分

<!-- 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部分

	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; }

互換性をテストします。今のところは大丈夫です。まだ大きな問題は見つかっていません~~。

れーれー