このブログでは、次のことについて説明します。

• アウトライン半径とは何ですか?
• HTML要素にアウトライン半径効果を適用する方法は?

アウトライン半径とは何ですか?

「 概要 」プロパティは、要素のアウトラインを形成するために使用されますが、直接実装することはできません。したがって、アウトラインに半径効果を適用する別の方法は、「 境界半径 」 CSS プロパティ。アウトラインの角の丸みを指定します。

HTML要素にアウトライン半径効果を適用する方法は?

アウトライン半径プロパティを使用するには、指定された手順に従ってください。

ステップ 1: 見出しを埋め込む

最初に、「

' に '

」。たとえば、「

' と '

」 HTML ドキュメントに 2 つの異なる見出しを埋め込むためのタグ。

ステップ 2: 最初の div コンテナーを追加する

その後、「

' 鬼ごっこ。また、「 クラス 」属性を選択し、選択に従ってクラスの名前を指定します。

---

---

ステップ 3: 2 番目の div コンテナーを作成する

別の「 分周 」 コンテナーに同じ手順に従って次のようにします。

< h1 スタイル = 「色:rgb(48, 10, 218)」 > Linuxhint LTD 英国 < / h1 >

< h2 >

アウトライン円形の角を作成するための border-radius のさまざまな例。

< / h2 >

< 分周 クラス = 'box1-div' >

Linuxhint は、ユーザーに最高かつ最もユニークなコンテンツを提供します。

< / 分周 >

< 分周 クラス = 'box2-div' >

複数のカテゴリで機能します。

< / 分周 >

上記のコードの出力を以下に示します。

ステップ 4: 最初のコンテナーのアウトラインを設定する

「」を利用して最初のコンテナにアクセスします .box1-div 」クラス「 . 」は、クラスにアクセスするためのセレクターです。

.box1-div {

概要 : 個体 ;

幅 : 300px ;

パディング : 15px ;

マージン : 25px ;

}

次に、以下の CSS プロパティを適用します。

• 「 概要 」プロパティを使用して、要素の周囲にアウトラインを追加します。たとえば、その値は「 個体 」。
• 「 幅 」は要素の横方向のサイズを指定します。
• 「 パディング 」は、要素のコンテンツの周囲にスペースを割り当てるために利用されます。
• 「 マージン 」要素境界の外側のスペースを指定します。

ステップ 5: 2 番目のコンテナーのアウトラインを設定する

次に、それぞれのクラスを使用して 2 番目の要素にアクセスします。 .box2-div 」：

.box2-div {

概要 : 個体 ;

境界半径 : 20px ;

幅 : 300px ;

パディング : 15px ;

マージン : 25px ;

}

CSS プロパティを適用します。 境界半径 要素の半径を定義します。このプロパティを使用すると、要素の周りに丸みを帯びた角を追加できます。

HTML 要素に輪郭の半径効果を追加することに成功したことがわかります。

結論

「 輪郭半径 ' 使用できなくなりました。ユーザーは、CSS の「outline」および「border-radius」プロパティを使用して、アウトラインの半径プロパティを適用できます。 「 概要 」は要素の周りにアウトラインを追加し、「 境界半径 」は、特にアウトラインのスタイリングに使用されます。この投稿では、HTML の要素の周りにアウトライン半径効果を追加する手順を示しました。