Question

如果您阅读长篇文章或在Internet上发帖，则有时当您从下一行的行尾移开视线时会迷路。它发生在我身上，所以我虽然给行的开头和结尾上色，但行的结尾和下一行的开头都有颜色。保持视觉跟踪。这是我的意思的示例：link（宽屏视图链接，对移动视图无济于事）在CSS中，我想将水平线水平应用于p标签，

每行有三种颜色（一种在左边，中间是透明的，另一种在右边的颜色）
每三行重复三种颜色图案

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

我希望拥有什么 image

关于如何做到这一点的任何想法？感谢您的帮助。

Answer 1

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

p {
  line-height:1.2em;
  background:
    linear-gradient(to right,transparent,#fff 30%,#fff 70%, transparent 100%),
    
    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%,#fff 70%, transparent 100%),
    
    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>

在P标签上应用css线性渐变，以不同方式设置每行的样式

1 个答案: