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

Eingefügter Rahmenradius mithilfe von CSS3-Verläufen

Das Erreichen eines eingefügten Rahmenradius ohne Bilder ist durch die Verwendung von CSS3-Verläufen möglich. Bei diesem Ansatz werden mehrere transparente radiale Farbverläufe übereinander gelegt, um die Illusion eines nach innen gekrümmten Randes um ein Element zu erzeugen.

Der folgende CSS-Code verwendet die Lösung von Lea Verou, um mithilfe von Farbverläufen einen eingefügten Randradius zu erstellen:

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

In diesem Code werden mehrere transparente radiale Farbverläufe an bestimmten Punkten rund um das Element positioniert, um die Illusion einer nach innen gerichteten Kurve zu erzeugen. Das Ergebnis ist eine Reihe transparenter Farbverläufe mit Kurven, die einen eingefügten Randradiuseffekt erzeugen.

Es ist wichtig zu beachten, dass diese Lösung Unterstützung für RGBA und Farbverläufe erfordert, die möglicherweise nicht von allen älteren Browsern unterstützt werden und erforderlich sind progressive Verbesserung oder ein bildbasierter Fallback für ältere Browser, die keine Farbverläufe unterstützen.

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