CSS3 グラデーションを使用して差し込み枠の半径をシミュレートするにはどうすればよいですか?

CSS3 グラデーションによる差し込み境界線半径のシミュレーション

純粋に CSS3 だけで差し込み境界線半径効果を実現するには、課題が生じます。ただし、CSS3 グラデーションを使用すると、目的の効果をシミュレートできます。

Lea Verou のグラデーション ソリューション

Lea Verou は、反対側に配置された 4 つの透明な放射状グラデーションを利用する革新的なソリューションを考案しました。

div.round {
    background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background-position: bottom left, bottom right, top right, top left;
        -moz-background-size: 50% 50%;
        -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

これらのグラデーションは、要素のセットを作成します。差し込み境界線の半径に似た透明な曲線。色と半径を調整して、さまざまなスタイルを作成できます。

ブラウザのサポートとフォールバック

この手法は、古いバージョンではサポートされていない RGBA とグラデーションのサポートに依存しています。ブラウザ、特に Internet Explorer。したがって、このソリューションを進歩的な機能拡張として使用するか、レガシー ブラウザーに画像ベースのフォールバックを提供することが重要です。

以上がCSS3 グラデーションを使用して差し込み枠の半径をシミュレートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。