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

Radius für eingefügte Ränder mit CSS3 erstellen

Traditionell waren für die Erstellung von eingefügten Rändern Bilder oder zusätzliche Elemente erforderlich. CSS3 bietet jedoch eine innovative Lösung mit Farbverläufen.

Lea Verous geniales CSS schlägt die Verwendung transparenter radialer Farbverläufe vor, die an den Ecken eines Elements positioniert sind. Diese Farbverläufe ahmen Kurven nach und erwecken die Illusion eines 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;
}

Diese Methode basiert auf der Browserunterstützung für Farbverläufe und RGBA. Erwägen Sie daher die Verwendung bildbasierter Fallbacks für ältere Browser.

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!