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

问题

I'm trying to create a circle with CSS that has a gradient border but also a transparent inner so that it looks like this:

There are solutions to create a gradient border if the inner is not transparent, which my below snippet is based on, but they work in principle by overlaying a one-coloured div over the gradient.

>>JSFIDDLE<<

>>SNIPPET<<

#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>

回答1:

I think the best way is linear-gradient with SVG. The idea is to create a circle and fill its stroke with a gradient.

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

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>

That you can also use as background:

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

text {
  font-size: 8em
}

#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>

回答2:

Set the color of the inner div to match the surrounding background and populate the inner div with data that is vertically and horizontally aligned to the middle (there are many ways to do that, I'm doing it in a "down and dirty" way here).

#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>

来源：https://stackoverflow.com/questions/48975398/is-it-possible-based-on-css-to-create-a-circle-with-gradient-border-and-transpar

标签

css

css3

linear-gradients