Div 角丸実装 <br>.one <br>{ <br>display:block; <br>overflow:hidden; <br>height : 1px; <br>マージン:0 4px; <br>ボーダー左: 1px ソリッド #B2D0EA; <br>.two <br>ディスプレイ:ブロック; ; <br>height:1px;/*線の高さは 1px*/ <br>margin:0 3px;/*外側の DIV の左右の余白から 3px*/ <br>border-left:1px Solid #B2D0EA;/*線の左側1pxのみ表示*/ <br>border-right:1px Solid #B2D0EA;/*線の右側1pxのみ表示*/ <br>background:#B2D0EA;/*色の変更に連動内側の Div、*/ <br>} <br>{ <br>overflow:hidden; <br>margin:0 2px; <br>border-right:1px; <br>背景:#EDF7FF; <br>ディスプレイ:ブロック; <br>マージン:0 1ピクセル <br>ボーダー-right:1px Solid #B2D0EA; <br>background :#EDF7FF; <br>} <br>.rou/*DIV は左右の境界線のみを表示し、色は p タグと一致します*/ <br>{ <br>border-left:1px Solid # B2D0EA; <br>border-right:1px ソリッド #B2D0EA; <br>border-right:1px ソリッド #B2D0EA; <br>< /style> <br><!--角が丸い Div 実装原則: <br />1、最初に P タグを使用し、Div の最初の行のマージンは値です (3px; と仮定します)。 p タグは最初の行の次の行にあり、Div からのマージンは最初の行からピクセル値を減算します (2px; と仮定します)。最後の p タグの値まで順番に実装されます。は 1px; <br />4、最初の行は完全に表示され、両端の 1 ピクセルのみが表示されます。 <br />5 を使用して、両端のワイヤーフレームを表示します。<br /> <br />--> <br><body> <br> <!--<p class <p class="four"></p> <br> <div class="rou2"> <br> <div class="rou"> ！ <br> </div> <br> <p class="four"></p> <br> <p class="two"> <br></p>
ウェブフロントエンド
htmlチュートリアル
純粋な DIV+CSS で角丸を実現! _html/css_WEB-ITnose
