div+cssで角丸ボーダーを実現_html/css_WEB-ITnose

div+css で丸い境界線を実現する: インターネット上で丸い境界線を実現するための div+css を調べてみましたが、ここで紹介するのは角丸長方形の境界線を実現する方法です。コードを使用して問題を説明します:

私の能力では, 純粋なDIV+CSSで実現できる効果はこれだけです。ここにコンテンツが配置されます。コードのルールを自分で理解するのは簡単です。
コードは非常に単純です。レイヤー a はコンテンツが配置されるレイヤーで、幅の値は 300 で、外側に向かって 2 ピクセルずつ幅が減少します。最外層には背景を属性として追加する必要があります。その目的は、上下の線を表示することです。
ここでは 3 ピクセルの丸い境界線が実装されています。レイヤー b の数によって、実装されるピクセル境界線の数が決まります。レイヤーの数が増えると、丸い角の滑らかさが失われるため、レイヤーの数は 3 つを超えないようにすることをお勧めします。できれば 2 ピクセルの丸い境界線である 2 つのレイヤー、または 1 つのレイヤーを使用することをお勧めします。 Firefox と IE6 は両方ともテストに合格しました。

例は次のとおりです:
---------------------------- -- ------------------------------------------

#a{
ボーダー左: 1 ピクセル レッド ソリッド;
高さ: 500 ピクセル; }
.b{
高さ: 1px;
ボーダー左: 1px 赤ソリッド;
;/ ヘッド>

div クラス = "b" style="margin-left:2px;width:296px;">

;

声明：

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