CSS を使用して角を丸くする方法

Css Wo Shi Yongshite Jiaowo Wankusuru Fang Fa

スタイリングは HTML Web サイト開発の重要な部分であり、CSS は HTML 要素にさまざまなスタイルを提供します。そのうちの 1 つは、任意の要素の周囲に境界線を作成することです。ほとんどの場合、実線、破線、点線、二重などの境界線の形状を使用してセクションを区別するために使用されます。

このマニュアルの目的は、丸い角の境界線を作成する方法を説明することです。そのためには、まず、「国境 ' 財産。それでは始めましょう！

CSSの「border」プロパティとは?

要素の周りに境界線を作成するには、「国境 ' 財産。このプロパティを使用することで、「 スタイル 」、「色 '、と ' 幅国境の」。

構文

境界プロパティの構文は次のとおりです。

国境 : 幅のスタイルの色

上記の値の説明は次のとおりです。

幅：境界線の幅を設定するために使用されます。
スタイル： 点線、破線、実線、二重線などの境界線のスタイルを設定するために使用されます。
色：境界線の色を決定します。

「」を実装する例を次に示します。国境 ' 財産。

CSS を使用して境界線を作成する方法は?

境界線を作成するには、まず HTML ファイルに要素を追加します。そのために、

を作成し、「 コーナー 」クラスに。その後、

タグと
タグを使用して見出しと段落を追加します。

< 体 >

< 分周クラス = 'コーナー' >

< h1 > Linux ヒント < / h1 >

< p > CSSで角を丸くする < / p >

< / 分周 >

< / 体 >
次に、CSS セクションに移動します。

ここで、「。コーナー」は、
に割り当てられたクラスにアクセスするために使用されます。その後、「国境」プロパティを指定し、幅、スタイル、および色の値を「 4px 」、「個体 '、と ' RGB(248, 6, 107) '、それぞれ。さらに、「幅」を追加します。 250px '、身長 ' 150px 」、および背景色「 RGB(234, 0, 255) 」 div の場合:

。コーナー {

国境 : 4px 個体 RGB ( 248 、 6 、 107 ) ;

幅 : 250px ;

身長 : 150px ;

背景色 : RGB ( 2. 3. 4 、 0 、 255 ) ;

}
上記のコードを実装したら、HTML ファイルに移動して実行します。次の結果が表示されます。

さて、次の部分に移り、正方形の境界線を丸い角の境界線に作成します。

CSS を使用して角を丸くする方法は?

丸い角の境界線を作成するには、「境界半径」プロパティが使用されており、好みに応じて角の半径を設定できます。

構文

border-radius プロパティの構文は次のとおりです。
境界半径 : 価値
前の例を続けて、border-radius を設定して角を丸くします。

例

の ' 。コーナー ” CSS ファイルのクラス、” の値を設定します。境界半径 ”プロパティとして” 30px 」：
境界半径 : 30px ;
上記の行を追加すると、次の出力が得られます。

上記の出力は、border-radius プロパティにより、境界線が角丸に正常に変更されたことを示しています。

結論

CSSで「境界半径」プロパティを利用して、境界線の角を変更します。指定した半径の値に応じて曲線の形状が変化します。上記のプロパティを使用して、選択に応じてコーナーの半径を設定できます。この記事では、例の助けを借りて、border-radius プロパティを使用して角の境界線を丸める方法を説明しました。