是否可以使用 css3 在 CIRCLE 上创建渐变边框？ [复制]答案

【问题标题】：Is it possible to create a gradient border on a CIRCLE with css3? [duplicate]是否可以使用 css3 在 CIRCLE 上创建渐变边框？ [复制]
【发布时间】：2015-07-13 16:40:20
【问题描述】：

我有一个圆形的背景图像。给它一个黄色边框。我想将边框更改为从黄色到白色的渐变。我见过很多带有方形边框的例子，但没有一个适用于圆形。这是我的代码：

.Profileimage{
  background-image: url("images/profilePic.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  overflow:hidden;
  -webkit-border-radius:50px;
  -moz-border-radius:50px;
  border-radius:50%;
  width:100px;
  height:100px;
  border: 5px solid rgb(252,238,33); 
}

&lt;div class="Profileimage"&gt;&lt;/div&gt;

谢谢！！

【问题讨论】：

这将使用border-image 属性，该属性不能与border-radius 结合使用。 this question 的答案深入探讨了为什么会这样，并提出了一种可以用来欺骗效果的技术。

标签： css linear-gradients

【解决方案1】：

这是你的答案：

#cont{
  background: -webkit-linear-gradient(left top, crimson 0%, #f90 100%);
  width: 300px;
  height: 300px;
  border-radius: 1000px;
  padding: 10px;
}

#box{
  background: black;
  width: 300px;
  height: 300px;
  border-radius: 1000px;
}

<div id="cont">
  <div id="box"></div>
</div>

【讨论】：

【解决方案2】：

也许是这样的？

.Profileimage{
  position: relative;
  background: linear-gradient(rgb(252,238,33), rgb(255,255,255));
  -webkit-border-radius:50px;
  -moz-border-radius:50px;
  border-radius:50%;
  width:100px;
  height:100px;
}
.Profileimage:after{
  position: absolute;
  display: block;
  top: 5px;
  left: 5px;
  width: 90px;
  height: 90px;
  content: "";
  background-color: #fff;
  background-image: url("images/profilePic.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
  overflow: hidden;
}

不确定这是否是您要查找的内容，但您可以将背景设置为渐变，然后在顶部放置一个元素（这里我使用的是 'after' 伪选择器）

小提琴：http://jsfiddle.net/6ue88pu6/1/

【讨论】：

您提供的 jsfiddle 链接未反映您在此处发布的代码 - 请仔细检查您的链接。
看起来不错，我必须说。没想到这可以用 CSS 完成。
太棒了-我喜欢那种外观。非常好 - 非常感谢......我会尝试两个
效率很高，谢谢！

【解决方案3】：

我看到这个问题已经很老了，但我只是遇到了同样的问题，我可以解决它。诀窍是将您的 div 包装到另一个 div 中。

.gradient-wrapper { padding: 10px; border-radius: 50%; display: inline-block;
  background: yellow; // As fallback for browsers which do not support gradient
  background: -webkit-linear-gradient(yellow, white); 
  background: -o-linear-gradient(yellow, white); 
  background: -moz-linear-gradient(yellow, white); 
  background: linear-gradient(yellow, white); 
}

#maincircle { width: 100px; height: 100px; background: #424242; border-radius: 50%; }

<div class="gradient-wrapper">
  <div id="maincircle">
    &nbsp;
  </div>
</div>

结果：

希望这有帮助！

【讨论】：

完美运行！谢谢！