如何在 CSS 中实现中间的细条渐变？

在 css 中实现中间的细条渐变

如何在 css 中实现这样的渐变效果，中间有一条细条？

答案：

可以使用 linear-gradient() 函数和一个角度值来实现。

.line-horizontal {
  width: 100px;
  height: 1px;
  background: linear-gradient(244deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
}

这个代码为一个 100px 宽、1px 高的元素创建一个水平渐变，从透明到白色，再到透明。244deg 的角度值将渐变线旋转到中间。

示例：

<p><br>中间的那个细条</p>
<div class="line-horizontal"></div>

效果图：

[图片]

以上就是如何在 CSS 中实现中间的细条渐变？的详细内容，更多请关注其它相关文章！