Czysta CSS Gradient koło granicy

Question

mam ten wymóg UI

W tej chwili mam roztwór roboczy div (o stałej wysokości i szerokości oraz tapetę na zewnętrznej granicy gradientu) i pseudo element, umieszczony absolute z obrazem tła wewnętrznej krawędzi.

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

Jednakże szukam bardziej eleganckie rozwiązanie (czystym CSS lub gradientem SVG?) Bez użycia obrazów tła, gdzie gradient można skalować bez pikselizacja.

ja zbadali i najbliżej mam natknąć się https://codepen.io/nordstromdesign/pen/QNrBRM i Possible to use border-radius together with a border-image which has a gradient? Ale potrzebne jest rozwiązanie, gdzie centrum jest przejrzyste, aby pokazać poprzez tle strony za

Update: Idealnie szukam roztworu o stosunkowo dobre wsparcie we wszystkich nowoczesnych przeglądarkach.

Answer 1

SVG to zalecany sposób tworzenia kształtu koła i rysowania gradientu/obramowania wokół niego.

SVG ma element circle, który można wykorzystać do narysowania kształtu koła. Ten kształt można wypełnić i obrysować jednolitym kolorem, gradientem lub wzorem.

* {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

Możesz użyć numeru mask, aby osiągnąć to, czego szukasz. Będziesz potrzebował pliku SVG z przezroczystym kółkiem. Tutaj użyłem obrazu z internetu, ale można tworzyć własne, aby Twoje potrzeby:

mask: url(circle.svg); 

• CodePen (ustawić tło na czerwono, aby pokazać przezroczystość)
• mask reference
• making your own masks