純CSS漸變圓邊界

此刻，我有一個div的工作溶液（具有固定的高度和寬度以及外部梯度邊界的背景圖像）和僞元素，定位absolute與內部邊界的背景圖像。

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

然而，在尋找更好的解決方案（純的CSS或SVG梯度？），而不使用背景圖像，其中所述梯度可以與沒有像素比例的。

我已經研究和最接近我所遇到的是https://codepen.io/nordstromdesign/pen/QNrBRM和Possible to use border-radius together with a border-image which has a gradient?但我需要一個解決方案，該中心是透明的，以便通過頁面的背景顯示

更新：理想情況下，要尋找具有相對的解決方案在所有現代瀏覽器中提供良好支持。

來源

2017-09-04 user1275105

SVG是建議創建圓形並在其周圍繪製漸變輪廓/邊框的方法。

SVG有一個circle元素，可用於繪製圓形。這種形狀可以用純色，漸變或圖案填充和勾勒。

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

來源

2017-09-04 04:33:20

您可以使用mask來實現您要查找的內容。你需要一個帶有透明圓圈的SVG文件。在這裏，我使用的圖像從互聯網，但你可以自己製作，以適應您的需求：

mask: url(circle.svg);

CodePen（背景設置爲紅色顯示透明）
mask reference
making your own masks

來源

2017-09-04 03:08:13 ishegg

感謝，會考慮這一點。儘管目前對此功能的支持非常薄弱：http://caniuse.com/#search=mask – user1275105

純CSS漸變圓邊界

回答

相關問題