CSS3 での境界半径の挿入

CSS3 では、角が外側ではなく内側に湾曲する境界半径の挿入を実現できます。画像を使わずにチャレンジしてみてください。ただし、CSS3 グラデーションを利用する賢い解決策があります。

Lea Verou の独創的なアプローチでは、曲線を使用した一連の透明なグラデーションを作成し、境界線の半径が挿入されているような錯覚を作り出します。これらのグラデーションを正確に配置することで、望ましい角丸効果を実現できます。

以下に示すように、彼女の CSS コードは、望ましい inset border-radius:

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 とグラデーションのサポートに依存しており、漸進的な強化戦略であることに注意することが重要です。古いブラウザまたはグラデーションをサポートしていないブラウザの場合は、サポートを提供するために画像ベースのフォールバックをお勧めします。