純粋な DIV+CSS で角丸を実現! _html/css_WEB-ITnose

Div 角丸実装 .one { display:block; overflow:hidden; height : 1px; マージン:0 4px; ボーダー左: 1px ソリッド #B2D0EA; .two ディスプレイ:ブロック; ; height:1px;/*線の高さは 1px*/ margin:0 3px;/*外側の DIV の左右の余白から 3px*/ border-left:1px Solid #B2D0EA;/*線の左側1pxのみ表示*/ border-right:1px Solid #B2D0EA;/*線の右側1pxのみ表示*/ background:#B2D0EA;/*色の変更に連動内側の Div、*/ } { overflow:hidden; margin:0 2px; border-right:1px; 背景:#EDF7FF; ディスプレイ:ブロック; マージン:0 1ピクセル ボーダー-right:1px Solid #B2D0EA; background :#EDF7FF; } .rou/*DIV は左右の境界線のみを表示し、色は p タグと一致します*/ { border-left:1px Solid # B2D0EA; border-right:1px ソリッド #B2D0EA; border-right:1px ソリッド #B2D0EA; 1、最初に P タグを使用し、Div の最初の行のマージンは値です (3px; と仮定します)。 p タグは最初の行の次の行にあり、Div からのマージンは最初の行からピクセル値を減算します (2px; と仮定します)。最後の p タグの値まで順番に実装されます。は 1px; 4、最初の行は完全に表示され、両端の 1 ピクセルのみが表示されます。 5 を使用して、両端のワイヤーフレームを表示します。

-->

！