我正在尝试在纯CSS3中复制一个绿色方形的图像。您可以在这里看到该图像:
到目前为止,我已经成功生成了方形,并且看起来与图像中的方形完全相同。问题是方形中圆圈的边框。正如您所看到的那样,图像中圆圈的边框是梯度的,而我的不是(请参见fiddle),我不知道如何在CSS中进行复制...
这是我正在使用的CSS代码: 这里是我的方形的fiddle
我该如何在CSS3中实现这个渐变圆形边框?
非常感谢。
![enter image description here](https://istack.dev59.com/5dKTF.webp)
到目前为止,我已经成功生成了方形,并且看起来与图像中的方形完全相同。问题是方形中圆圈的边框。正如您所看到的那样,图像中圆圈的边框是梯度的,而我的不是(请参见fiddle),我不知道如何在CSS中进行复制...
这是我正在使用的CSS代码: 这里是我的方形的fiddle
.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中实现这个渐变圆形边框?
非常感谢。