如何在 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

赏

选择打赏方式

微信 支付宝 QQ钱包

打赏

打赏

打赏