我正在尝试使用具有渐变边框但也是透明内部的CSS创建一个圆圈,使其看起来像这样：
如果内部不透明,我可以使用解决方案来创建渐变边框,我的下面片段是基于它的,但它们原则上通过在渐变上叠加一个彩色div来工作.
>> 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>
解决方法
我认为最好的方法是使用SVG
linear-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>
你也可以用作背景：
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="#f90"/></linearGradient></defs><circle cx="100" cy="100" r="90" stroke="url(#linear)" 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>
