如何创建两端半透明的水平线？能否用CSS实现特定绿色线条？

当然可以用纯CSS实现这种效果！你的思路方向是对的，只是之前的渐变写法和样式搭配没调整到位，导致端点尖锐。我给你几个实用的解决方案，你可以根据想要的效果选择：

方案1：线性渐变直接实现过渡 #

这是最直接的方式，通过调整渐变的色标位置，让线条两端自然过渡到透明：

.transparent-line {
  width: 100%;
  height: 3px;
  /* 水平方向渐变：两端透明，中间保留绿色 */
  background: linear-gradient(90deg, transparent, #01f4e4 10%, #01f4e4 90%, transparent);
}

原理说明： #

• 90deg 设定渐变方向为水平从左到右
• 色标位置 10% 和 90% 控制绿色区域的范围，中间80%是纯绿色，两端各10%从透明过渡到绿色，避免了尖锐的端点

方案2：CSS Mask实现更柔和的边缘 #

如果想要两端的透明过渡更细腻（类似模糊效果），可以用CSS Mask来实现：

.soft-transparent-line {
  width: 100%;
  height: 3px;
  background-color: #01f4e4; /* 基础绿色背景 */
  /* 用mask控制显示区域：两端透明，中间显示绿色 */
  -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

原理说明： #

• Mask的作用是“遮罩”元素：白色区域会显示下方的背景色，透明区域会隐藏背景色
• 这种方式的过渡比单纯的渐变更自然，边缘不会有硬边界

方案3：圆角+透明过渡的组合（兼顾圆角端点） #

如果你想要线条本身带有圆角，同时两端透明，可以结合伪元素和Mask：

.round-transparent-line {
  width: 100%;
  height: 3px;
  position: relative;
}

.round-transparent-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #01f4e4;
  border-radius: 3px; /* 让线条本身的端点是圆角 */
  -webkit-mask: linear-gradient(90deg, transparent, white 15%, white 85%, transparent);
  mask: linear-gradient(90deg, transparent, white 15%, white 85%, transparent);
}

为什么你的原代码会出现尖锐端点？ #

你之前写的代码：

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

问题在于：

1. 渐变没有指定色标位置，默认是均匀分布，导致透明区域突然出现，没有过渡
2. border-radius: 50% 只会让线条的上下边缘变成圆角，但左右端点还是直角，叠加突然的透明就显得尖锐

内容的提问来源于stack exchange，提问作者Martin54