带有渐变边框的CSS3圆圈？答案

【问题标题】：CSS3 circle with gradient border?带有渐变边框的CSS3圆圈？
【发布时间】：2014-10-11 22:27:30
【问题描述】：

我正在尝试在纯 css3 中复制绿色方形图像。你可以在这里看到图片：

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

我目前使用的 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 中做这个渐变圆形边框？

非常感谢

【问题讨论】：

标签： gradient css

【解决方案1】：

我会使用伪元素 (:before) 并使用渐变背景设置样式。
（那是因为 border-image 不能与 border-radius 结合使用）

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

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

【讨论】：

【解决方案2】：

一种可能性是用对角渐变背景制作一个稍大的圆圈，并将其放在“核心”圆圈的后面。这样，较大的圆圈似乎是第二个圆圈的边界。通过修改你的小提琴，我得到了类似this。

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

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

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

【讨论】：

【解决方案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 班级。这可能很接近。您可能希望使用这些值来使其更接近您的喜好。

【讨论】：