CSS を使用してボックスの内側と外側の両方の角を丸くするにはどうすればよいですか?

ボックスの内側と枠線の角を丸くする

背景

ボックスの内側と外側の両方の角に丸みを付けると、デザインの視覚的な魅力が高まります。ただし、両方の要素の境界に影響を与えずにこの効果を実現するのは難しい場合があります。このガイドでは、CSS を使用してこの目的の効果を実現する方法について説明します。

内側の境界線の計算

内側のボックスに丸い角を適用するには、内側の境界線の半径を計算する必要があります。 。これは、外側の境界線の半径から境界線の幅を減算することによって行われます。

• 内側の境界線の半径 = 外側の境界線の半径 - 境界線の幅

では、この場合、外側の境界線の半径が 6px、境界線の幅が 5px です:

• 内側の境界線の半径 = 6px - 5px = 1px

更新された CSS:

.radius-all { border-radius: 6px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(255, 255, 255, 0.2); }

一般的な境界線の適用

境界線と内部コンテンツに別個のボックスを使用している場合は、border-radius プロパティとそのベンダーを適用します。角の丸みを一貫させるために、両方のボックスに特定のバージョンを適用します。

例 (個別のボックス):

<div>

例 (単一ボックス):

.rounded-borders {
    border-radius: 5px;
}

<div>

以上がCSS を使用してボックスの内側と外側の両方の角を丸くするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。