Wie kann ich einen eingefügten Randradius mithilfe von CSS3-Verläufen simulieren?

Simulieren eines eingefügten Randradius mit CSS3-Verläufen

Das Erreichen eines eingelassenen Randradiuseffekts allein mit CSS3 stellt eine Herausforderung dar. Mithilfe von CSS3-Verläufen können Sie jedoch den gewünschten Effekt simulieren.

Verlaufslösung von Lea Verou

Lea Verou hat eine innovative Lösung entwickelt, die vier transparente, gegenüberliegende radiale Verläufe nutzt Ecken des Elements.

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 Farbverläufe erzeugen eine Reihe transparenter Kurven, die einem eingefügten Rand ähneln Radius. Sie können die Farben und Radien anpassen, um verschiedene Stile zu erstellen.

Browser-Unterstützung und Fallback

Diese Technik erfordert die Unterstützung von RGBA und Farbverläufen, die in älteren Versionen nicht unterstützt werden Browser, insbesondere Internet Explorer. Daher ist es wichtig, diese Lösung als progressive Erweiterung zu verwenden oder einen bildbasierten Fallback für ältere Browser bereitzustellen.

Das obige ist der detaillierte Inhalt vonWie kann ich einen eingefügten Randradius mithilfe von CSS3-Verläufen simulieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!