在 P 标签上应用 css linear-gradient 以不同的方式设置每一行的样式

Question

如果您在互联网上阅读长篇文章或 post，当您将视线从行尾移动到下一行时，您有时会迷路。它发生在我身上所以我虽然给行的开头和结尾着色，其中行的结尾和下一行的开头有颜色。保持视觉轨迹。这是我的意思的一个例子：link（在宽屏上查看 link，在移动设备上没有帮助）在 CSS 中，我想将线渐变水平应用到 p 标签，其中

每条线三种颜色（左边一种，中间透明，右边另一种颜色）
每三行重复三种颜色图案

到目前为止我发现它可行的是只有一种颜色的斑马状条纹 image

我想要的 image

知道怎么做吗？感谢你们的帮助。

Answer 1

可以考虑repeating-linear-gradient多背景。您在左侧重复一个渐变，在右侧重复另一个渐变，然后使用第三个渐变在中间创建分离并模拟透明部分：

p {
  line-height:1.2em;
  background:
    linear-gradient(to right,transparent,#fff 30% 70%, transparent),
    
    repeating-linear-gradient(to bottom,
      red   0    ,red   1.2em,
      blue  1.2em,blue  2.4em,
      green 2.4em,green 3.6em) 
    left/50% 100% no-repeat,
    
    repeating-linear-gradient(to bottom,
      orange 0    ,orange  1.2em,
      pink   1.2em,pink    2.4em,
      purple 2.4em,purple  3.6em) 
    right/50% 100% no-repeat;
}

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis, mi eget euismod faucibus, ligula sem suscipit tortor, ut rutrum dui augue et urna. Maecenas quis diam lectus. Mauris tempus enim finibus dolor pulvinar commodo. Aenean auctor tortor sit amet venenatis ultricies. Pellentesque condimentum quam sapien, non sagittis nulla molestie eu. Morbi nec orci convallis, tempor elit sed, scelerisque arcu. Quisque vel luctus erat.
</p>

正如您注意到 line-height 在这里很重要，因此我们可以考虑使用 CSS 变量来使其更加灵活：

p {
  line-height:var(--l,1.2em);
  background:
    linear-gradient(to right,transparent,#fff 30% 70%, transparent),
    
    repeating-linear-gradient(to bottom,
      red   0                     ,red   calc(1*var(--l,1.2em)),
      blue  calc(1*var(--l,1.2em)),blue  calc(2*var(--l,1.2em)),
      green calc(2*var(--l,1.2em)),green calc(3*var(--l,1.2em))) 
    left/50% 100% no-repeat,
    
    repeating-linear-gradient(to bottom,
      orange 0                     ,orange calc(1*var(--l,1.2em)),
      pink   calc(1*var(--l,1.2em)),pink   calc(2*var(--l,1.2em)),
      purple calc(2*var(--l,1.2em)),purple calc(3*var(--l,1.2em))) 
    right/50% 100% no-repeat;
}

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis, mi eget euismod faucibus, ligula sem suscipit tortor, ut rutrum dui augue et urna. Maecenas quis diam lectus. Mauris tempus enim finibus dolor pulvinar commodo. Aenean auctor tortor sit amet venenatis ultricies. Pellentesque condimentum quam sapien, non sagittis nulla molestie eu. Morbi nec orci convallis, tempor elit sed, scelerisque arcu. Quisque vel luctus erat.
</p>

<p style="--l:2em;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis, mi eget euismod faucibus, ligula sem suscipit tortor, ut rutrum dui augue et urna. Maecenas quis diam lectus. Mauris tempus enim finibus dolor pulvinar commodo. Aenean auctor tortor sit amet venenatis ultricies. Pellentesque condimentum quam sapien, non sagittis nulla molestie eu. Morbi nec orci convallis, tempor elit sed, scelerisque arcu. Quisque vel luctus erat.
</p>

为了具有透明度，我们可以考虑一个 mask 和伪元素：

p {
  position:relative;
  z-index:0;
  line-height:var(--l,1.2em);
}
p::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    repeating-linear-gradient(to bottom,
      red   0                     ,red   calc(1*var(--l,1.2em)),
      blue  calc(1*var(--l,1.2em)),blue  calc(2*var(--l,1.2em)),
      green calc(2*var(--l,1.2em)),green calc(3*var(--l,1.2em))) 
    left/50% 100% no-repeat,
    
    repeating-linear-gradient(to bottom,
      orange 0                     ,orange calc(1*var(--l,1.2em)),
      pink   calc(1*var(--l,1.2em)),pink   calc(2*var(--l,1.2em)),
      purple calc(2*var(--l,1.2em)),purple calc(3*var(--l,1.2em))) 
    right/50% 100% no-repeat;
  -webkit-mask:linear-gradient(to right,#fff,transparent 30% 70%, #fff);
  mask:linear-gradient(to right,#fff,transparent 30% 70%, #fff);
}

html {
  min-height:100%;
  background:linear-gradient(#e2e2e3,#f2f2f3);
}

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis, mi eget euismod faucibus, ligula sem suscipit tortor, ut rutrum dui augue et urna. Maecenas quis diam lectus. Mauris tempus enim finibus dolor pulvinar commodo. Aenean auctor tortor sit amet venenatis ultricies. Pellentesque condimentum quam sapien, non sagittis nulla molestie eu. Morbi nec orci convallis, tempor elit sed, scelerisque arcu. Quisque vel luctus erat.
</p>

<p style="--l:2em;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis, mi eget euismod faucibus, ligula sem suscipit tortor, ut rutrum dui augue et urna. Maecenas quis diam lectus. Mauris tempus enim finibus dolor pulvinar commodo. Aenean auctor tortor sit amet venenatis ultricies. Pellentesque condimentum quam sapien, non sagittis nulla molestie eu. Morbi nec orci convallis, tempor elit sed, scelerisque arcu. Quisque vel luctus erat.
</p>

在 P 标签上应用 css linear-gradient 以不同的方式设置每一行的样式

apply css linear-gradient on P tag to style each line differently

html

css

linear-gradients