纯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渐变圆边界

回答

相关问题