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