HTML渐变多小圆圈,html – 渐变色圆形边框

我有一个问题,我想有一个圆角渐变边框,但显然border-radius不能使用border-image.

我附上了结果,我希望方形边框是圆的.

先谢谢你.

.luna-icon-wrap{

float: right;

padding: 5px 5px;

-webkit-border-radius: 50% 50%;

-moz-border-radius: 50% 50%;

border-radius: 50% 50%;

border: 2px solid transparent;

-moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);

-webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);

border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);

border-image-slice: 1;

}

.luna-featbox2-icon{

width: 70px;

height: 70px;

text-align: center;

-webkit-border-radius: 50% 50%;

-moz-border-radius: 50% 50%;

border-radius: 50% 50%;

background: #43257f; /* For browsers that do not support gradients */

background: -webkit-linear-gradient(left top, #43257f, #40c4ff); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(bottom right, #43257f, #40c4ff); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(bottom right, #43257f, #40c4ff); /* For Firefox 3.6 to 15 */

background: linear-gradient(to bottom right, #43257f, #40c4ff); /* Standard syntax */

}