是否可以使用css3在CIRCLE上创建渐变边框？

Question

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

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

<div class="Profileimage"></div>

谢谢！

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

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

不确定这是否是您正在寻找的内容，但您只需将背景设置为渐变，然后将元素放在顶部（此处我使用＆＃; 39;在＆＃39;伪选择器之后）

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

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

结果：

希望这有帮助！