带渐变边框的CSS3圆圈？

Question

我试图在纯css3中复制绿色方形图像。您可以在此处查看图片：

到目前为止，我已设法生成正方形，看起来就像图像中的那个。问题是广场上的圆圈边界。正如你所看到的，图像中该圆圈的边界是渐变而我的不是（见小提琴），我不知道如何在CSS中复制它...

Here is my fiddle of the square

我目前使用的CSS代码：

.greenBlock, .greenCore {
    background-color: #00c200;
    border: 3px solid;
    border-top-color: #00de00;
    border-right-color: #006900;
    border-bottom-color: #006900;
    border-left-color: #00de00;
    z-index: 10;
    width: 42px;
    height: 42px;
}

.greenCore {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    -webkit-transform: translate(25%, 25%);
    transform: translate(25%, 25%); 
}

如何在CSS3中执行此渐变圆边框？

非常感谢

Answer 1

我会使用伪元素（:before）并使用渐变背景设置样式 （因为border-image无法与border-radius 合并）

＆＃13;

＆＃13;

.greenBlock {
	background-color: #00c200;
	border: 3px solid;
	border-top-color: #00de00;
	border-right-color: #006900;
	border-bottom-color: #006900;
	border-left-color: #00de00;
	width: 42px;
	height: 42px;
	position:relative;
	z-index:10;
}

.greenCore {
	background-color: #00c200;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	top:50%;
	left:50%;
	margin-left:-11px; /*half width*/
	margin-top:-11px;
	position:relative;
}
.greenCore:before{
	content:'';
	position:absolute;
	z-index:-1;
	border-radius:50%;
	width:28px; /*22 of greenCore + 3 + 3 for the borders*/
	height:28px;
	left:-3px;
	top:-3px;
    
	background: -moz-linear-gradient(-45deg, #00ff00 0%, #004900 100%);
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#00ff00), color-stop(100%,#004900));
	background: -webkit-linear-gradient(-45deg, #00ff00 0%,#004900 100%);
	background: -o-linear-gradient(-45deg, #00ff00 0%,#004900 100%);
	background: -ms-linear-gradient(-45deg, #00ff00 0%,#004900 100%);
	background: linear-gradient(135deg, #00ff00 0%,#004900 100%);
}

＆＃13;

<div class="palette greenBlock" data-code="2">
   <div class="greenCore"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

一种可能性是使用对角渐变背景制作稍大的圆圈，并将其置于＆＃34;核心＆＃34; -circle后面。这样，较大的圆圈将显示为第二个圆圈的边界。通过修改你的小提琴，我得到了类似this的内容。

为了制作渐变，我使用了linear-gradient函数，并将其指定为背景：

background: linear-gradient(135deg, #00de00, #006900);

第一个值是以度为单位的渐变方向。后两个值是渐变的开始和结束颜色。

Answer 3

也许您可以尝试添加此内容：

box-shadow:1px 1px 3px 1px #000, -1px -1px 1px #fff; -moz-box-shadow:1px 1px 3px 1px #000, -1px -1px 1px #fff; -webkit-box-shadow:1px 1px 3px 1px #000, -1px -1px 1px #fff;

致.greenCore班。这可能很接近。您可能希望使用这些值来使其更接近您的喜好。