logo标签列表

如何制作斜向圆形边界渐变？

cssgradientcss-shapeslinear-gradients
8
我有一个关于CSS3的问题。我不知道如何制作像这样的斜向圆形渐变边框： circle example 我发现了类似于这个： 

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

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

任何帮助都将不胜感激。

1
嗯...我想你想要一个圆锥渐变...它们还没有出现。我想在这里使用SVG。 - Paulie_D
唉，好的谢谢，但这是唯一的方法吗？ - kuba12
2个回答
11

锥形渐变是一种沿着中心的圆弧进行的渐变。这就是我们在彩色轮中看到的。正如Paulie_D所指出的，目前CSS还不支持这种效果，但Lea Verou开发了一个polyfill。

话虽如此，你要寻找的似乎并不是锥形渐变，而是普通的角度线性渐变，但仅应用于边框。由于border-image属性的预期工作方式，无法通过CSS实现规范。

一个盒子的背景，但不包括它的边框图像，会被剪切到适当的曲线上

如果圆形的中心部分是纯色的，则可以使用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);
}
<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设置为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>

6
您可以尝试像这样使用伪元素和负的 z-index：
注意：由于我在内部元素中使用了背景颜色，所以背景并非透明。 

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

透明背景而不是白色背景？ - Tudor
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接