是否可以使用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;
}

不确定这是否是您正在寻找的,但您可以将背景设置为渐变,然后将元素放在顶部(这里我使用'after'伪选择器)

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