継承された境界半径でバックグラウンドオーバーフローを解く

CSSの興味深い（ただし迷惑な）特徴は、子要素の背景が親要素の丸い境界に溢れている可能性があることです。たとえば、内部要素を含むカードは、内部要素が設定されている場合、その背景がカードの境界線をオーバーフローする場合があります。

通常、この問題を解決する最も簡単な方法は、カード要素にoverflow: hidden属性を追加することです。これは、ほとんどの人がこの状況に遭遇したときに考える最初の解決策だと思います。

ただし、これを行うと、新しい問題が発生します - カード要素の外側のコンテンツが切り取られます - したがって、マイナスのマージンを使用して

を使用して子要素のコンテンツをカードから移動することは不可能です。 position: absolute

子要素の背景が親要素の丸い境界線に溢れないようにするのを防ぐためのやや面倒でありながらより効果的な方法があります。

最も簡単な方法は、子要素の丸い境界を継承できるようにすることです。

.child {
  border-radius: inherit;
}

の略語が長すぎる場合でも、状況に応じて四隅の丸い角の半径を継承することができます。

border-radiusまたは、論理プロパティを使用する意思のある人のために、ここに同等のコードがあります。 （論理的な特性を理解しやすくするために、

および

.child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

を

およびtopおよびleftに置き換えます。）start。 bottom rightカードに背景を直接適用してみませんか？ end

.child {
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}

要素自体に

を含み、背景を直接設定する場合、同じ効果を達成できます。それで、なぜこれをしないのですか？

まあ、時々あなたはそれをすることができません。たとえば、.card要素が2つの部分に分割されている場合、その一部の色のみが色付けされています。 border-radius

なぜこれを行う必要があるのですか？

.cardスタンバイが最良の理由かもしれません。少なくとも、丸い半径調整スキームを使用すると、後で問題を作成しないことがわかります。

このモードは、CSSアンカーポジショニングが完全にサポートされている場合に特に役立ちます。これは、すぐに1〜2年後にポップアップポジショニングの標準になると思います。

つまり、ポップアップの場合、私は個人的には、ポップアップコンテンツをドキュメントストリームから移動し、直接子要素として

要素に入れることを好みます。これを行うことで、アンカーポジショニングを使用するときに

がポップアップをトリミングするのを防ぐことができます。

以上が継承された境界半径でバックグラウンドオーバーフローを解くの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。