Wie kann ich einen eingefügten Randradius nur mit CSS3 erstellen?

Eingefügter Rahmenradius mit CSS3

In CSS3 ist es möglich, einen eingefügten Rahmenradius zu erreichen, bei dem die Ecken eher nach innen als 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 zu sehen ist, 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.

Das obige ist der detaillierte Inhalt vonWie kann ich einen eingefügten Randradius nur mit CSS3 erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!