如何制作对角圆边框渐变？

但不幸的是,这只适用于正方形.

任何帮助,将不胜感激.

圆锥形渐变是沿着围绕中心的圆弧的渐变.这就是我们在色轮中看到的.正如Paulie_D所指出的那样,这些目前用CSS无法实现,但Lea Verou为它开发了一种polyfill.

话虽如此,你所寻找的似乎并不是一个圆锥形的渐变,它是正常的角度线性渐变,但仅适用于边界.这不能通过CSS border-image属性实现,因为它的工作方式符合规范.

框的背景,但不是其边框图像,被剪切到适当的曲线

如果圆的中心部分是纯色,则可以使用Vitorino答案中提到的方法.如果它不是纯色(即页面背景是渐变或需要显示的图像)那么它将无济于事.在这种情况下可以使用以下方法.

使用蒙版图像:

该方法使用圆形掩模图像来掩盖圆的内部.这使得它看起来好像只有边框应用了渐变.的缺点是,这个功能目前支持只能在Webkit的浏览器提供动力.

.border-gradient-mask {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-image: linear-gradient(to bottom left, #7B73A4 0%, #150E5E 100%);
  -webkit-mask-image: radial-gradient(circle at center, transparent 57%, white 58%);
  mask-image: radial-gradient(circle at center, transparent 57%, white 58%);
}
body {
  background: radial-gradient(circle at center, sandybrown, chocolate);
}

.box {
  width: 250px;
  height: 250px;
  position: relative;
  margin: auto;
  margin: 30px;
  border-radius: 50%;
  background: #fff;
}
.box:after {
  content: '';
  position: absolute;
  top: -15px;
  bottom: -15px;
  right: -15px;
  left: -15px;
  background-image: linear-gradient(to bottom left, #7B73A4 0%, #150E5E 100%);
  z-index: -1;
  border-radius: inherit;
}