div+cssで角丸長方形を作る【更新版】_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

Jun 24, 2016 pm 12:31 PM

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

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

HTML部分

&lt;!-- round main --&gt;	&lt;div id=&quot;round&quot;&gt;    	                &lt;!-- r_top ---&gt;                &lt;div class=&quot;r_top&quot;&gt;                        &lt;em class=&quot;r_a&quot;&gt;&lt;/em&gt;                        &lt;em class=&quot;r_b&quot;&gt;&lt;/em&gt;                        &lt;em class=&quot;r_c&quot;&gt;&lt;/em&gt;                        &lt;em class=&quot;r_d&quot;&gt;&lt;/em&gt;                &lt;/div&gt;                 &lt;!-- //r_top  end ---&gt;                                     &lt;!-- r_box ---&gt;                &lt;div class=&quot;r_box&quot;&gt;                    这是一个圆角矩形!&lt;br /&gt;                    这是一个圆角矩形!&lt;br /&gt;                    这是一个圆角矩形!&lt;br /&gt;                    这是一个圆角矩形!&lt;br /&gt;                    这是一个圆角矩形!&lt;br /&gt;                    这是一个圆角矩形!&lt;br /&gt;                &lt;/div&gt;                 &lt;!-- //r_box  end ---&gt;                                    &lt;!-- r_bottom ---&gt;                &lt;div class=&quot;r_bottom&quot;&gt;                         &lt;em class=&quot;r_d&quot;&gt;&lt;/em&gt;                        &lt;em class=&quot;r_c&quot;&gt;&lt;/em&gt;                        &lt;em class=&quot;r_b&quot;&gt;&lt;/em&gt;                        &lt;em class=&quot;r_a&quot;&gt;&lt;/em&gt;                               &lt;/div&gt;                   &lt;!-- //r_bottom  end---&gt;                          &lt;/div&gt;    &lt;!-- // round main end--&gt;

ログイン後にコピー

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

ログイン後にコピー

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

れーれー

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。