Border-Radius はコンテンツをクリップしますか、それとも背景だけですか?

境界半径クリッピング: 動作を理解する

質問:

境界半径を持つ要素のコンテンツを使用できますか境界を越えて拡張しますか?

提供例:

次の HTML および CSS コードを考えてみましょう:

<div class="progressbar">
    <div class="buffer"></div>
</div>

.progressbar {
    height: 5px;
    width: 100px;
    border-radius: 5px;
}

.buffer {
    width: 25px;
    height: 5px;
    background: #999999;
}

この例では、「.buffer」要素が、 ".progressbar"

答え:

はい、この動作は設計によるものです。

説明:

CSS仕様によると、要素のデフォルトのオーバーフロープロパティは「visible」です。これは、コンテンツがクリップされず、コンテナの外側にレンダリングされる可能性があることを意味します。 「border-radius」プロパティはコンテナの背景をクリップしますが、オーバーフロー プロパティが「visible」に設定されている場合、コンテンツは影響を受けません。

背景クリッピングの CSS 仕様には、「その他の効果」と記載されています。境界線またはパディングエッジ(「可視」以外の「オーバーフロー」など)にクリップするものは、カーブにもクリップする必要があります。これは、オーバーフローが「表示」以外に設定されている場合、コンテンツはコンテナーの丸い角の範囲内で切り取られることを意味します。

したがって、コンテンツが丸い角の範囲内に確実に残るようにするには、次のことが必要です。コンテナのオーバーフロー プロパティを「hidden」、「scroll」、または別の非「表示」値に設定します。この例でオーバーフローを「hidden」に設定すると、「.buffer」要素は「.progressbar」コンテナの丸い角内でクリップされます。

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