ホームページ  >  記事  >  ウェブフロントエンド  >  CSSで丸い枠線を設定する方法

CSSで丸い枠線を設定する方法

coldplay.xixi
coldplay.xixiオリジナル
2021-04-29 15:50:4020017ブラウズ

CSS で丸い枠線を設定する方法は、丸い枠線 [border-radius] を使用することです。これら 4 つのラジアンの角丸が同じである場合は、[border-radius: 30px] と書くことができます。 ;]。

CSSで丸い枠線を設定する方法

このチュートリアルの動作環境: Windows7 システム、css3 バージョン、DELL G3 コンピューター。

CSS で丸い境界線を設定する方法:

丸い境界線の基本的な使用法 (border-radius):

最も基本的な丸い境界線使用法は、同じ円弧を持つ 4 つの丸い角を設定することです。

boder-top-left-radius:30px;      //左上角
boder-top-right-radius:30px;   //右上角
boder-bottom-left-radius:30px;  //右下角
boder-bottom-right-radius:30px; //左下角

4 つの丸い角が同じ場合、次のように記述できます:

border-radius:30px;

css丸い境界線を設定します:

css パート:

.div1{
            margin:0 auto;
            background: darkcyan;
            width:200px;
            height:200px;
            border:2px solid darkslategray;
            border-radius:30px;
            text-align: center;
            line-height: 200px;
        }

html パート:

 <div class="div1">圆角边框</div>

効果は次のとおりです:

CSSで丸い枠線を設定する方法

推奨される関連チュートリアル: CSS ビデオチュートリアル

以上がCSSで丸い枠線を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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