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

Question

我正在尝试用 CSS 创建一个 圆，其中有一个 gradient border还有一个透明内层这样看起来像这样：

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

>>JSFIDDLE<<

>>片段<<

#cont{ background: -webkit-linear-gradient(left top, crimson 0%, #f90 100%); width: 150px; height: 150px; border-radius: 1000px; padding: 5px; } #box{ background: #fff; width: 150px; height: 150px; border-radius: 1000px; } #example { background: url(http://blogs.taz.de/hausblog/files/2017/12/20171208_FB_reuters2.png); }

<div id="example"> <div id="cont"> <div id="box"></div> </div> </div>

Answer 1

设置内部 div 的颜色以匹配周围的背景，并使用垂直和水平对齐到中间的数据填充内部 div（有很多方法可以做到这一点，我在这里以 "down and dirty" 的方式进行。

#cont{
background: -webkit-linear-gradient(left top, crimson 0%, #f90 100%);
width: 150px;
height: 150px;
border-radius: 1000px;
padding: 5px;
}

#box{
background: url(http://blogs.taz.de/hausblog/files/2017/12/20171208_FB_reuters2.png);
width: 150px;
height: 150px;
border-radius: 1000px;
text-align:center;
font-size:7em;
color:#FFF;
display:table-cell;
vertical-align:middle;
font-family:Calibri, Arial, Helvetica, sans-serif;
}

#example {

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

<div id="example">
<div id="cont">
<div id="box">7</div>
</div>
</div>

Answer 2

我认为最好的方法是 linear-gradient 使用 SVG。这个想法是创建一个圆并用渐变填充它的笔划。

body {
  background: url(https://picsum.photos/id/1026/800/800);
}

text {
  font-size:8em
}

<svg viewBox='0 0 200 200' width=150 height=150>
  <!-- define the gradient -->
  <defs>
    <!-- x1,y1,x2,y2 are used to define the gradient direction -->
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="60%">
      <!-- start color at 0%-->
      <stop offset="0%"   stop-color="crimson"/>
      <!-- end color at 100%-->
      <stop offset="100%" stop-color="#f90"/>
    </linearGradient>
  </defs>
  <!-- Create an svg circle at [100,100] with radius of 90
       make the border-width 6 (stroke-width) fill it with gradient (stroke)
       and make the content of circle transparent (fill)
  --->
  <circle cx="100" cy="100" r="90" stroke="url(#linear)" stroke-width="6" fill="transparent" />
  <!-- Create a text element at the postion [70,140] -->
  <text x="70" y="140" fill="white">7</text>
</svg>

您也可以用作背景：

body {
  background: url(https://picsum.photos/id/1026/800/800);
}

#count {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="150" height="150"><defs><linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="60%"><stop offset="0%"   stop-color="crimson"/><stop offset="100%" stop-color="%23f90"/></linearGradient></defs><circle cx="100" cy="100" r="90" stroke="url(%23linear)" stroke-width="6" fill="transparent" /></svg>') no-repeat;
  text-align: center;
  color: #fff;
  font-size: 8em;
  width: 150px;
  height: 150px;
}

<div id="count">
  7
</div>

更新

现在您可以依靠 mask 获得此效果而不使用 SVG:

body {
  background: url(https://picsum.photos/id/1026/800/800);
}

#count{
  text-align: center;
  color: #fff;
  font-size: 8em;
  width: 150px;
  height: 150px;
  position:relative;
}

#count::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius:50%;
  background:linear-gradient(crimson,#f90);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 8px),#fff 0);
}

<div id="count">
  7
</div>

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

Is it possible based on CSS to create a circle with gradient border and transparent inner?

css

linear-gradients