Css 如何创建具有小透明端点的水平线

可以创建这条绿线吗

我试图创建这个

div

，但是结尾太尖锐了

width: 100%;
height: 3px;
background: linear-gradient(#01f4e4, #01f4e4, transparent);
border-radius: 50%;

---

我在网站上使用图像，但我很好奇，它是否可以用css实现。

你可以使用这样的三向渐变。查看创建它们的简单方法

正文{
背景：黑色；
填充顶部：100px；
}
div{
保证金：0自动；
显示：块；
宽度：300px；
高度：3倍；
背景：莫兹线性梯度（左，rgba（30,87153,0）0%，rgba（34183,67,0.98）50%，rgba（38184,70,1）51%，rgba（225228226,0）99%，rgba（229229229,0）100%）；/*FF3.6-15*/
背景：-webkit线性梯度（左，rgba（30,87153,0）0%，rgba（34183,67,0.98）50%，rgba（38184,70,1）51%，rgba（225228226,0）99%，rgba（229229229,0）100%）；/*Chrome10-25，Safari5.1-6*/
背景：线性梯度（向右，rgba（30,87153,0）0%，rgba（34183,67,0.98）50%，rgba（38184,70,1）51%，rgba（225228226,0）99%，rgba（229229229,0）100%）；/*W3C，IE10+，FF16+，Chrome26+，Opera12+，Safari7+*/
}

---

您可以使用这样的三向渐变。查看创建它们的简单方法

正文{
背景：黑色；
填充顶部：100px；
}
div{
保证金：0自动；
显示：块；
宽度：300px；
高度：3倍；
背景：莫兹线性梯度（左，rgba（30,87153,0）0%，rgba（34183,67,0.98）50%，rgba（38184,70,1）51%，rgba（225228226,0）99%，rgba（229229229,0）100%）；/*FF3.6-15*/
背景：-webkit线性梯度（左，rgba（30,87153,0）0%，rgba（34183,67,0.98）50%，rgba（38184,70,1）51%，rgba（225228226,0）99%，rgba（229229229,0）100%）；/*Chrome10-25，Safari5.1-6*/
背景：线性梯度（向右，rgba（30,87153,0）0%，rgba（34183,67,0.98）50%，rgba（38184,70,1）51%，rgba（225228226,0）99%，rgba（229229229,0）100%）；/*W3C，IE10+，FF16+，Chrome26+，Opera12+，Safari7+*/
}

hr.style-two{
边界：0；
高度：1px；
背景图像：线性渐变（向右，rgba（255,0,0,0），rgba（255,0,0,0.75），rgba（255,0,0,0,0））；
}
人力资源{
显示：块；
unicode-bidi：分离；
-之前的webkit保证金：0.5em；
-之后的webkit保证金：0.5em；
-webkit边距开始：自动；
-webkit页边距结束：自动；
溢出：隐藏；
边框样式：插图；
边框宽度：1px；
利润率：50px0.5px0；
}

hr.style-two{
边界：0；
高度：1px；
背景图像：线性渐变（向右，rgba（255,0,0,0），rgba（255,0,0,0.75），rgba（255,0,0,0,0））；
}
人力资源{
显示：块；
unicode-bidi：分离；
-之前的webkit保证金：0.5em；
-之后的webkit保证金：0.5em；
-webkit边距开始：自动；
-webkit页边距结束：自动；
溢出：隐藏；
边框样式：插图；
边框宽度：1px；
利润率：50px0.5px0；
}
使用完整的rgba颜色并定义渐变出现的点


正文{
背景：黑色；
}
.线路{
宽度：100%；
高度：1px；
背景：线性梯度（向右，rgba（1254228,0）0%，rgba（1254228,1）20%，rgba（1254228,1）80%，rgba（1254228,0）100%）；
}
使用完整的rgba颜色并定义渐变出现的点


正文{
背景：黑色；
}
.线路{
宽度：100%；
高度：1px；
背景：线性梯度（向右，rgba（1254228,0）0%，rgba（1254228,1）20%，rgba（1254228,1）80%，rgba（1254228,0）100%）；
}