如何用CSS渐变与透明色实现虚实竖线并消除第四条线底部虚线

我有一段CSS背景代码，想要实现每第四条线为实线，但目前第四条线底部仍有虚线残留，需要在不取消颜色透明度的前提下解决这个问题。

原代码如下：

--c: rgba(84, 110, 122, 0.25) /* 颜色 */;
--t: 1px /* 线条厚度 */;
--g: 1%; /* 间距 */;
--d: 5px /* 虚线长度 */;
           
background:
  linear-gradient(90deg,var(--c) var(--t),#0000 0) calc(2*var(--g))/calc(4*var(--g)) 100%,
  conic-gradient(at var(--t) 50%,#0000 75%,var(--c) 0) 0/var(--g) var(--d);

解决方案：添加遮罩层隐藏指定位置的虚线 #

通过添加CSS遮罩，可以精准在每第四条线的位置遮掉下方的虚线，同时保留颜色透明度。修改后的代码如下：

--c: rgba(84, 110, 122, 0.25) /* 颜色 */;
--t: 1px /* 线条厚度 */;
--g: 1%; /* 间距 */;
--d: 5px /* 虚线长度 */;
           
background:
  linear-gradient(90deg,var(--c) var(--t),#0000 0) calc(2*var(--g))/calc(4*var(--g)) 100%,
  conic-gradient(at var(--t) 50%,#0000 75%,var(--c) 0) 0/var(--g) var(--d);
/* 添加遮罩，在每4个间距的位置（实线位置）隐藏虚线 */
mask: linear-gradient(90deg, #000 0 calc(4*var(--g) - var(--g)), #0000 0 calc(4*var(--g))) 0 0/calc(4*var(--g)) 100%;
-webkit-mask: linear-gradient(90deg, #000 0 calc(4*var(--g) - var(--g)), #0000 0 calc(4*var(--g))) 0 0/calc(4*var(--g)) 100%;

原理说明 #

• 遮罩层以4*var(--g)为一个周期，前3个间距区域保留内容（显示虚线），第4个间距区域完全透明（隐藏虚线）。
• -webkit-mask用于兼容webkit内核浏览器。
• 该方法不会破坏原有颜色的透明度，完全满足需求。

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