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

CSS3 グラデーションを使用した挿入境界線半径

CSS3 グラデーションを使用すると、画像なしで挿入境界線半径を実現できます。このアプローチには、いくつかの透明な放射状グラデーションを重ねて、要素の周りに内側に曲がった境界線の錯覚を作成することが含まれます。

次の CSS コードでは、Lea Verou のソリューションを使用して、グラデーションを使用して挿入境界線半径を作成します。

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 とグラデーションのサポートが必要であることに注意してください。これは、すべての古いブラウザーではサポートされていない可能性があり、必要な場合があります。プログレッシブ エンハンスメント、またはグラデーションをサポートしていない古いブラウザ用の画像ベースのフォールバック。

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