Inset Border-Radius mit CSS3

In CSS3 kann ein eingefügter Border-Radius erreicht werden, bei dem die Ecken nach innen statt nach außen gekrümmt sind Seien Sie herausfordernd, ohne Bilder zu verwenden. Es gibt jedoch eine clevere Lösung, die CSS3-Verläufe nutzt.

Lea Verous genialer Ansatz besteht darin, eine Reihe transparenter Verläufe mit Kurven zu erstellen und so die Illusion eines eingefügten Randradius zu erzeugen. Durch die präzise Positionierung dieser Farbverläufe können Sie den gewünschten abgerundeten Eckeneffekt erzielen.

Ihr CSS-Code definiert, wie unten gezeigt, eine benutzerdefinierte Klasse für ein Element mit dem gewünschten eingefügten Randradius:

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;
}

Das Anwenden dieser Klasse auf ein Element führt zu einem Element mit eingefügtem Randradius. Es ist wichtig zu beachten, dass diese Technik auf der Unterstützung von RGBA und Farbverläufen basiert, was sie zu einer progressiven Verbesserungsstrategie macht. Für ältere Browser oder Browser, die keine Farbverläufe unterstützen, wird zur Unterstützung ein bildbasierter Fallback empfohlen.