具有渐变边框的CSS3圆圈？

我想在纯css3中复制绿色正方形图像。你可以在这里看到图像： enter image description here 具有渐变边框的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中做这种渐变圆形边框？

非常感谢

来源

2014-10-11 Maurice

我会使用一个伪元素（:before）并将其设置为渐变背景。
（那是因为border-image不能与border-radius组合）

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

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

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

来源

2014-10-11 23:22:26

非常好，谢谢！ – Maurice 2014-10-12 12:48:27

或许你可以尝试添加此：

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类。这可能很接近。您可能想要使用这些值来让它更接近您的喜好。

来源

2014-10-11 22:38:36 matt6frey

一种可能性是使对角梯度背景稍大的圆，并把它后面的“芯“-圈。这样，较大的圆圈就会成为第二个圆圈的边界。通过修改你的小提琴，我得到了像this。

为了使梯度I中使用的linear-gradient功能，并赋予它为背景：

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

第一个值是在度梯度的方向。后两个值是渐变的开始和结束颜色。

来源

2014-10-11 23:23:37 Teodor

具有渐变边框的CSS3圆圈？

回答

相关问题