Question

我不确定是否已经正确提出了问题，但是我正在寻找有关此问题的合法答案。

我正在努力实现以下目标。

创建带有边框的div
给div一个半径（做个圆）
给渐变加上边框
保持div透明的背景

我找到了一些示例，这些示例可以让我创建渐变边框，但是在大多数情况下，div的背景不是透明的，但是颜色与主体背景匹配。 example

下面显示了我为div添加边框的一种方法，尽管这不允许您使用border-radius，因此将div保持为正方形，尽管允许背景透明，但不允许让您的形状成为一个圆形。

border-image:linear-gradient(to right,#23966c, #faaa54, #e23b4a, #db0768, #360670);
border-image-slice:1;

我也尝试过使用剪切路径圆，但是没有找到任何可行的方法。

让我震惊的最后一个解决方案是使用字体，我在Google字体中寻找了最圆的“ o”，并找到了“ Josefin Sans”字体家族。使用“ o”作为我的圆，但是这样做会使我陷入边界宽度的束缚中。以下代码用于在我的文本上实现渐变剪辑。

 background: linear-gradient(to right,#23966c, #faaa54, #e23b4a, #db0768, #360670);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

请参阅codepen example.

我正在考虑创建svg ..，但是如果有人遇到了解决方案，请告诉我。

谢谢。

Answer 1

这是SVG解决方案：

body {
 background-color:#080808;
 animation:changebg 30s infinite;
 overflow:hidden;
}

@keyframes changebg {
 0%{background-color:#23966c;}
 20%{background-color:#faaa54;}
 40%{background-color:#e23b4a;}
 60%{background-color:#db0768;}
 80%{background-color:#360670;}
 100%{background-color:#23966c;}
}

<svg width="300" height="300">
  <defs>
    <!-- define gradient -->
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="blue" />
      <stop offset="50%" stop-color="purple" />   
      <stop offset="100%" stop-color="yellow" />
    </linearGradient>
  </defs>
  <circle r="100" cx="150" cy="150" fill="transparent" stroke="url(#grad)" stroke-width="10" />
</svg>

顺便说一下，这是使用CSS的另一个想法，但是当然没有透明度：

body {
  background-color: pink;
  overflow: hidden;
}

.cir {
  width: 200px;
  height: 200px;
  margin: 20px auto;
  border-radius: 50%;
  border: 20px solid transparent;
  background: 
  linear-gradient(pink, pink) padding-box, 
  linear-gradient(to right, #23966c, #faaa54, #e23b4a, #db0768, #360670) border-box;
}

<div class="cir"></div>

如何为包含边界半径和透明背景的边界添加渐变？

1 个答案: