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

Question

我对 CSS3 有疑问。我不知道如何制作这样的对角圆形渐变边框：

我找到了类似 this 的内容：

.box {
  width: 250px;
  height: 250px;
  margin: auto;
  background: #eee;
  border: 20px solid transparent;
  -moz-border-image: -moz-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
  -webkit-border-image: -webkit-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
  border-image: linear-gradient(to bottom right, #3acfd5 0%, #3a4ed5 100%);
  border-image-slice: 1;
}

<div class="box"></div>

但不幸的是，这仅适用于正方形。

如有任何帮助，我们将不胜感激。

Answer 1

你可以尝试这样的事情我已经使用了一个带有 -ve 的伪元素 z-index

注意：背景不是透明的，因为我使用了 background-color 作为内部元素

.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;
}

<div class="box"></div>

Answer 2

圆锥形渐变是围绕一个中心沿着圆弧的渐变。这就是我们在色轮中看到的。正如 Paulie_D 指出的那样，目前 CSS 但 Lea Verou has developed a polyfill for it.

无法实现这些

话虽如此，您正在寻找的似乎不是圆锥形渐变，它是正常角度的线性渐变，但仅应用于边框。这不能通过 CSS border-image 属性实现，因为它是按照 specs.

的方式工作的

A box's backgrounds, but not its border-image, are clipped to the appropriate curve

如果圆的中心部分是纯色，那么可以使用维托里诺的回答中提到的方法。如果它不是纯色（即页面背景是渐变或需要显示的图像）则无济于事。以下方法可用于这种情况。

使用遮罩图像：

此方法使用圆形蒙版图像来蒙版圆的内部。这使得它看起来好像只有边框应用了渐变。缺点是此功能目前受支持仅在支持 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);
}

<div class="border-gradient-mask"></div>

使用 SVG 形状或蒙版：

另一种方法是使用 SVG circle 元素创建圆，然后将渐变指定给 stroke 属性。渐变还应用了 gradientTransform，因为这是使用 SVG 生成角度线性渐变的唯一方法。

.border-gradient-svg {
  position: relative;
  height: 200px;
  width: 200px;
  border-radius: 50%;
}
.border-gradient-svg svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
.border-gradient-svg circle {
  fill: transparent;
  stroke: url(#grad);
  stroke-width: 8;
}
body {
  background: radial-gradient(circle at center, sandybrown, chocolate);
}

<div class="border-gradient-svg">
  <svg viewBox="0 0 100 100">
    <defs>
      <linearGradient id="grad" gradientUnits="objectBoundingBox" gradientTransform="rotate(135 0.5 0.5)">
        <stop offset="0%" stop-color="#7B73A4" />
        <stop offset="100%" stop-color="#150E5E" />
      </linearGradient>
    </defs>
    <circle r="46" cx="50" cy="50" />
  </svg>
</div>

同样可以通过使用 SVG mask 来实现。所需要做的就是创建一个包含两个 circle 元素的蒙版，用白色填充较大的圆圈，用黑色填充较小的圆圈，然后将蒙版应用于我们原来的 circle 元素。小圆圈（黑色填充）占据的区域将是透明的。

.border-gradient-svg {
  position: relative;
  height: 200px;
  width: 200px;
  border-radius: 50%;
}
.border-gradient-svg svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
.border-gradient-svg .grad-border {
  fill: url(#grad);
  mask: url(#masker);
}
body {
  background: radial-gradient(circle at center, sandybrown, chocolate);
}

<div class="border-gradient-svg">
  <svg viewBox="0 0 100 100">
    <defs>
      <linearGradient id="grad" gradientUnits="objectBoundingBox" gradientTransform="rotate(135 0.5 0.5)">
        <stop offset="0%" stop-color="#7B73A4" />
        <stop offset="100%" stop-color="#150E5E" />
      </linearGradient>
      <mask id="masker" x="0" y="0" width="100" height="100">
        <circle r="50" cx="50" cy="50" fill="#fff" />
        <circle r="42" cx="50" cy="50" fill="#000" />
      </mask>
    </defs>
    <circle r="50" cx="50" cy="50" class="grad-border"/>
  </svg>
</div>

使用剪辑路径：

创建它的另一种方法是使用 clip-path（带有内联 SVG）和 clip-rule set to evenodd。 剪辑路径解决方案相对于其他解决方案的优势 是，这只会在悬停在填充区域（而不是透明区域）上时触发悬停效果。缺点是 IE 不支持剪辑路径（即使使用 SVG）。

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

<svg width="0" height="0">
  <defs>
    <clipPath id="clipper" clipPathUnits="objectBoundingBox">
      <path d="M0,0.5 a0.5,0.5 0 1,0 1,0 a0.5,0.5 0 1,0 -1,0z M0.08,0.5 a0.42,0.42 0 1,0 0.84,0 a0.42,0.42 0 1,0 -0.84,0z" clip-rule="evenodd" />
    </clipPath>
  </defs>
</svg>
<div class="border-gradient-clip"></div>

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

How to make diagonal circle border gradient?

css

gradient

linear-gradients

css-shapes