内側のボックスや枠線の角を丸くするにはどうすればよいですか?

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

問題を理解する

目標は、角が丸いボックスと枠線を作成することです。丸い境界線があります。背景クリップ プロパティを使用すると、境界線の角を丸くすることができます。ただし、内側のボックスは長方形のままです。

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

内側のボックスの角を丸めるには、border-radius プロパティを使用できます。内側の境界の半径は、外側の境界の半径と境界の幅の差として計算されます。したがって、内側の境界線の半径は次のようになります。

inner border radius = outer border radius - border width

境界線の幅が境界線の半径よりも大きい場合、内側の境界線の半径は負になり、コーナーが反転します。したがって、内側の境界線の半径を計算するときは、境界線の幅を考慮する必要があります。

コードの変更

提供されたコードでは、境界線の幅は 5 ピクセル、外側の境界線の半径は 10 ピクセルです。上記の式を使用すると、内側の境界線の半径は次のようになります。

inner border radius = 10px - 5px = 5px

変更された CSS は次のようになります。

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

.template-bg {
  background: #FFF;
}

.template-border {
  border: 5px solid rgba(255, 255, 255, 0.2);
}

追加の考慮事項

• 角が丸くなるのを避けるため外側の境界線では、-vendor-background-clip プロパティを次のように設定する必要があります。 border-box.
• カラー オーバーレイは、16 進数のカラー コードを 10 進数値に変換し、不透明度を下げるために必要な計算を実行するメソッドを使用して JavaScript で適用できます。
• 丸い境界線は内側の両方に適用できます。別のボックス要素を使用するか、内側のボックスに直接境界線を作成することで、外側のボックスを作成できます。
• 丸みを帯びた境界線クラスを作成して適用できます。複数のボックスの境界線を効率的に丸くします。

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