如何将渐变背景应用于html css中的圆div

Question

如何在HTML中创建div并应用渐变背景，如图所示：

我尝试了一些js-fiddle片段，但是在图片中无法做到这样的事情，它将在定价表中用于显示最新的折扣。我的另一个选择是在我的定价表中使用硬报价。

http://www.hongkiat.com/blog/css-gradient-border/

我尝试了上述链接并应用了border-radius:50%但未获得所需的结果。

Answer 1

边框图片尚未得到很好的支持，所以我认为您需要使用两个容器，其中一个容器的样式为background: linear-gradient()：

https://jsfiddle.net/nsvn00px/

<div class="circle">
  <div class="circle__inner"></div>
</div>

CSS：

.circle {
  position: relative;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: linear-gradient(to right, red, green);
}
.circle__inner {
  position: absolute;
  width: 46px; height: 46px;
  top: 2px; left: 2px;
  border-radius: 50%;
  background-color: white;
}

这也可以在一个容器中使用伪类完成，但我认为这可以让你更好地了解它是如何工作的。