Border-Radius はコンテンツをクリップしますか?

境界半径とコンテンツのクリッピング: 予想される動作を理解する

境界半径をコンテナに適用すると、コンテナ内のコンテンツが予期せずエッジを超えて拡張される可能性があります。この観察により、コンテンツは丸い境界線内でクリップされるべきでしょうか?

期待される動作を理解するために、CSS の仕様を詳しく調べます。 div を含む要素のデフォルトのオーバーフロー プロパティは「visible」に設定されており、コンテンツがクリップされず、ブロック ボックスの外側に広がる可能性があることを示します。

さらに、背景と境界線モジュールは「その他の効果」を指定します。境界線またはパディングエッジ(「可視」以外の「オーバーフロー」など)にクリップするものは、カーブにもクリップする必要があります。」これは、丸い角でコンテンツをクリップするには、コンテナのオーバーフロー値を「visible」以外の値に設定する必要があることを意味します。

したがって、驚くかもしれませんが、コンテンツがコンテナのオーバーフロー値が「非表示」またはその他の非表示値でない限り、丸い境界線内でクリップされません。この動作により、コンテナーに目に見えるオーバーフローがある場合にコンテンツが切り捨てられなくなります。

以上がBorder-Radius はコンテンツをクリップしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。