CSSで内側のボックスとその境界線の両方に丸い角を作成するにはどうすればよいですか?

内側のボックスとその境界線の両方に丸い角を実現する方法

CSS では、border-radius を使用して丸い角を適用できます。プロパティ。ピクセルまたはパーセンテージの値を受け入れます。ただし、このプロパティを使用して内側のボックスとその境界線の両方に丸い角を作成する場合は、境界線の幅の影響を考慮する必要があります。

内側の境界線の半径の計算

内側の境界線の半径を計算するには、外側の境界線の半径から境界線の幅を減算します。これにより、境界線の丸い外観を維持しながら、ボックスの内側の角が適切な丸みを帯びるようになります。

たとえば、外側の境界線の半径を 6 ピクセル、境界線の幅を 5 ピクセルに設定する場合、内側の境界線の半径は

inner border radius = 6px - 5px = 1px

CSS コードの調整

提供されたコードで、次の変更を行う必要があります:

.radius-all { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }

これは調整されます外側の境界線の半径を 6px にします。内側の境界線の半径を許可するには、background-clip プロパティを削除するか、border-box に設定する必要があります。

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

レイヤー化と境界線

別のボックスが境界線に使用される場合は、border-radius プロパティを境界ボックスと内側ボックスの両方に適用する必要があります。あるいは、より効率的なアプローチは、内側のボックス自体内で境界線を管理することです。

一般的な境界線

複数のボックスに丸い角を一貫して適用するには、 .rounded-borders のようなクラスを作成し、関連する要素に適用します。

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

<div>

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