我想知道是否有人知道,是否可以使用CSS创建这样的渐变？我知道它可以使用画布完成但是没有可能吗？
最佳答案
这是我能够在不熬夜的情况下尽可能接近,但是,是的,这是可能的！
[但是,只有诡计,抱歉;我不知道有任何方法可以创建像这样的合法CSS3渐变环,但至少,这是纯HTML / CSS！]
[但是,只有诡计,抱歉;我不知道有任何方法可以创建像这样的合法CSS3渐变环,但至少,这是纯HTML / CSS！]
CSS
[我为它凌乱而道歉]
.tophalf {
position:absolute;
width: 250px; height:125px;
-webkit-border-top-left-radius: 193px;
-webkit-border-top-right-radius: 193px;
-moz-border-radius-topleft: 193px;
-moz-border-radius-topright: 193px;
border-top-left-radius: 193px;
border-top-right-radius: 193px;
background: -moz-linear-gradient(left,#db9771 1%,#cc5f7f 51%,#c30380 100%);
background: -webkit-gradient(linear,left top,right top,color-stop(1%,#db9771),color-stop(51%,#cc5f7f),color-stop(100%,#c30380));
background: -webkit-linear-gradient(left,#c30380 100%);
background: -o-linear-gradient(left,#c30380 100%);
background: -ms-linear-gradient(left,#c30380 100%);
background: linear-gradient(to right,#c30380 100%);
}
.inner {
position: relative; z-index: 1;
top: 20px; left: 20px;
width: 210px; height: 210px;
background-color: white;
border-radius: 100%;
}
.bottomhalf {
position:absolute;
top:133px;
width: 250px; height:125px;
-webkit-border-bottom-right-radius: 193px;
-webkit-border-bottom-left-radius: 193px;
-moz-border-radius-bottomright: 193px;
-moz-border-radius-bottomleft: 193px;
border-bottom-right-radius: 193px;
border-bottom-left-radius: 193px;
background: -moz-linear-gradient(left,#edc552 51%,#ffec00 100%);
background: -webkit-gradient(linear,#edc552),#ffec00));
background: -webkit-linear-gradient(left,#ffec00 100%);
background: -o-linear-gradient(left,#ffec00 100%);
background: -ms-linear-gradient(left,#ffec00 100%);
background: linear-gradient(to right,#ffec00 100%);
}
HTML
我怎么做的？
简单而简单,我将两个半圆放在一起,给每个半个不同的渐变,但保持左侧的起始颜色相同,确保“接缝”只在一侧.
然后,我在两个半圆的中心放置了一个白色的圆圈,将所有东西都隐藏在中间并成功创建了一个渐变环.
来源？
编辑：哎呀！没有Gradient Editor,我无法做到.
原文链接：https://www.f2er.com/css/427356.html