在P标签上应用css线性渐变,以不同方式对每条线进行样式设置

Question

如果你阅读长篇文章或在互联网上发帖,当你从下一行的末尾移动你的眼睛时,你会迷路.它发生在我身上,所以我虽然着色行的开头和结尾,行的结尾和下一行的开头都有颜色.保持视觉轨迹.这里是我的意思的一个例子:链接(在宽屏幕上查看链接,对移动视图没有帮助)在CSS中我想将线条渐变水平应用于p标签

1. 每行有三种颜色(左边一个,中间透明,右边另一个颜色)
2. 每三行重复三种颜色模式

到目前为止,我发现它是可行的是只有一个彩色图像的斑马状条带

我希望有什么 形象

关于如何做到这一点的任何想法？我感谢你的帮助.

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>