基于CSS是否可以创建一个带有渐变边框和透明内部的圆？

我正在尝试创建一个带有CSS的圆圈，该圆圈具有渐变边框，但也具有透明内部，因此它看起来像这样：

有一些解决方案可以在内部不透明的情况下创建渐变边框，我下面的代码片段就是基于此，但它们的工作原理是在渐变上覆盖一个单色div

---

>JSFIDDLESNIPPET设置内部

div

的颜色以匹配周围的背景，并使用垂直和水平对齐到中间的数据填充内部

div

（有很多方法可以做到这一点，我在这里是以“向下和肮脏”的方式）

#续{
背景：-webkit线性梯度（左上角，深红色0%，#f90 100%）；
宽度：150px；
高度：150像素；
边界半径：1000px；
填充物：5px；
}
#盒子{
背景：url(http://blogs.taz.de/hausblog/files/2017/12/20171208_FB_reuters2.png);
宽度：150px；
高度：150像素；
边界半径：1000px；
文本对齐：居中；
字号：7em；
颜色：#FFF；
显示：表格单元格；
垂直对齐：中间对齐；
字体系列：Calibri、Arial、Helvetica、无衬线字体；
}
#范例{
背景：url(http://blogs.taz.de/hausblog/files/2017/12/20171208_FB_reuters2.png);
}

7.

我认为最好的方法是使用SVG。其想法是创建一个圆，并用渐变填充其笔划

正文{
背景：url(https://picsum.photos/id/1026/800/800);
}
正文{
字号：8em
}

7.

使用与“示例”div相同的背景怎么样？。如果我将

background:#fff

替换为

background:url(http://blogs.taz.de/hausblog/files/2017/12/20171208_FB_reuters2.png)

在您的示例中，它似乎有效。不过，你可能需要用

背景位置

来调整它，所以我不想完全回答。谢谢迈克。在实际页面上，它实际上有点复杂（圆圈位于一个透明的div上，同样位于背景img的顶部），所以这项工作是行不通的。没有理由包括JS FIDLE的链接，因为你已经做了正确的事情，并在这里创建了一个代码片段。@ScottMarcus的人有时会对没有JSFIDLE供他们玩感到恼火，我可以从一个方便的角度理解。没有人会要求你提供一个帮助如果您包含一个工作代码段，请使用Fiddle。您可以更轻松地在代码片段中玩游戏，因为您不需要离开页面。。。。很确定这正是我在评论中所说的，OP说这对他不起作用…@MikeMcCaughan我没有看到你的评论，但如果这对OP不起作用，那么他应该更清楚地解释他的情况，这样我们才能更准确地帮助他。嗨，斯科特，谢谢。然而，我的初始解决方案已经有一个彩色的内部，而解决方案，我需要一个透明的内部按照我原来的职位。我开始觉得用CSS是不可能的，我可能不得不用photoshop创建一个图像instead@AlphaX你能解释一下为什么你必须有一个透明的背景吗？你的目标不就是让自己看起来像你吗？令人印象深刻的泰曼尼！我不理解svg代码tbh-您能详细说明提供的代码吗？这样我就可以根据自己的需要对其进行定制了？非常感谢@AlphaX是的，当然；）我将添加更多评论：）@AlphaX我添加了更多评论和链接。。。您只需要在需要时调整渐变颜色，并更改SVG的高度/宽度。。背景也是一样。。。如您所见，我使用了相同的svg代码并将其作为背景图像。非常感谢Temani！我真的不认为这是可能的！我将有一个阅读和修改需要！