検索

ホームページ  >  記事  >  ウェブフロントエンド  >  CSS枠線を丸枠に書く方法

CSS枠線を丸枠に書く方法

WBOY
WBOYオリジナル
2021-11-12 11:44:568330ブラウズ

記述方法: 1. ボーダーに「border-radius: 角丸値;」スタイルを追加して角丸サイズを一律に設定; 2. 「border-top-left-radius: 角丸値;」を追加"、"border -top-right-radius: fillet value;" およびその他のスタイルは、それぞれ 4 隅のフィレット サイズを設定します。

CSS枠線を丸枠に書く方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

丸枠に CSS 枠を記述する方法

丸枠 (border-radius) の基本的な使用法: border-radius 属性は略語属性。四隅の丸みの属性を設定するために使用されます。

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

border-top-left-radius：30px；      //左上角
border-top-right-radius：30px；   //右上角
border-bottom-left-radius：30px；  //右下角
border-bottom-right-radius：30px； //左下角

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

border-radius：30px；

例: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .div1{
margin:0 auto;
background: darkcyan;
width:200px;
height:200px;
border:2px solid darkslategray;
border-radius:30px;
text-align: center;
line-height: 200px;
}
        </style>
    </head>
    <body>
    <div class="div1">圆角边框</div>
    </body>
</html>

出力結果:

CSS枠線を丸枠に書く方法

プログラミング関連の知識については、プログラミング ビデオをご覧ください。 ！

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

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

関連記事

続きを見る