reine CSS Gradient Kreisgrenze

Question

ich diese UI Anforderung

Im Moment habe, habe ich eine funktionierende Lösung eines div (mit einer festen Höhe und Breite und ein Hintergrundbild für die äußeren Gradienten Grenze) und eine Pseudo Element, positioniert absolute mit einem Hintergrundbild der inneren Grenze.

.div { 
    position: relative; 
    width: 254px; 
    height: 254px; 
    border: 2px solid transparent; 
    border-radius: 50%; 
    background: url(../img/gradient_border_circle.png) no-repeat 50%; 
} 
div:before { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    transform: translate(-50%,-50%); 
    left: 50%; 
    width: 98px; 
    height: 98px; 
    border-radius: 50%; 
    background: url(../img/gradient_border_circle_inner.png) no-repeat 50%; 
} 

jedoch Suche eine elegantere Lösung (reine CSS oder svg Gradient?) Ohne die Verwendung von Hintergrundbildern, wo der Gradient ohne pixelation skaliert werden kann.

ich recherchiert und am nächsten Ich habe über gekommen ist https://codepen.io/nordstromdesign/pen/QNrBRM und Possible to use border-radius together with a border-image which has a gradient? Aber ich brauche eine Lösung, wo das Zentrum, um transparent ist durch die Seitenhintergrund

Update zu zeigen: Idealerweise Suche eine Lösung mit relativ Gute Unterstützung in allen modernen Browsern.

Answer 1

SVG ist die empfohlene Weise, um eine Kreisform zu erstellen und zeichnen Umrisslinie/Grenze um ihn herum.

SVG hat ein circle Element, das verwendet werden kann, um eine Kreisform zu zeichnen. Diese Form kann mit einer Farbe, einem Verlauf oder einem Muster ausgefüllt und umrissen werden.

* {box-sizing: border-box;} 
 

 
body { 
 
    background: linear-gradient(#333, #999); 
 
    text-align: center; 
 
    min-height: 100vh; 
 
    padding-top: 10px; 
 
    margin: 0; 
 
} 
 
svg {vertical-align: top;}

<svg width="210" height="210"> 
 
    <defs> 
 
    <linearGradient id="grad1" x1="0" y1="1" x2="1" y2="0"> 
 
     <stop offset="0" stop-color="#f5d700" /> 
 
     <stop offset="1" stop-color="#0065da" /> 
 
    </linearGradient> 
 
    <linearGradient id="grad2" xlink:href="#grad1" x1="1" y1="0" x2="0" y2="1"></linearGradient> 
 
    </defs> 
 
    <g fill="none"> 
 
    <circle cx="100" cy="100" r="95" stroke="url(#grad1)" stroke-width="2" /> 
 
    <circle cx="100" cy="100" r="40" stroke="url(#grad2)" stroke-width="5" /> 
 
    </g> 
 
</svg>

Answer 2

Sie können ein mask verwenden, um zu erreichen, wonach Sie suchen. Sie benötigen eine SVG-Datei mit einem transparenten Kreis. Hier habe ich noch ein Bild aus dem Internet, aber Sie können Ihre eigenen machen Ihre Bedürfnisse anzupassen:

mask: url(circle.svg); 

• CodePen (stellen Sie den Hintergrund auf Rot Transparenz zeigen)
• mask reference
• making your own masks