CSS 渐变跳跃颜色

Question

我有一个 css class 用于整个页面背景。这个想法是在每种颜色之间以及每种颜色内部都会有一条黑线，但它会跳过其中一些黑线。

目前正在跳过第 2、3、5 和 7 行。

我正在使用 NextJS，css 和顺风css。

这是代码：

 <main
   className={`w-screen h-screen flex items-center justify-center  ${styles.targetBackground} `}
 >

.targetBackground {
  background: linear-gradient(225deg, #F5ED32 0% 10%, #000 10.1%, #F5ED32 10.3% 20%, #000 20.1% 20.2%, #F3130C 20.3% 30%, #000 30.1%, #F3130C 30.3% 40%, #000 40.1%, #3CB9CA 40.3% 50%, #000 50.1%,#3CB9CA 50.3% 60%, #000 60.1% 70%, #fff 70.1%, #000 70.3% 79.9%, #fff 80% 90%, #000 90.1%, #fff 90.3% 100%);
}

最终代码有效，我只是增加了 Temani 解决方案的像素大小：

.targetBackground {
  --l: 8px;
  background: linear-gradient(225deg, 
   #F5ED32 0 10%, #000 0 calc(10% + var(--l)), 
   #F5ED32 0 20%, #000 0 calc(20% + var(--l)), 
   #F3130C 0 30%, #000 0 calc(30% + var(--l)),
   #F3130C 0 40%, #000 0 calc(40% + var(--l)), 
   #3CB9CA 0 50%, #000 0 calc(50% + var(--l)),
   #3CB9CA 0 60%, #000 0 calc(60% + var(--l)),
   #000    0 70%, #fff 0 calc(70% + var(--l)), 
   #000    0 80%, #fff 0 calc(80% + var(--l)), 
   #fff    0 90%, #000 0 calc(90% + var(--l)),
   #fff    0);
  
  height:100vh;
}

Answer 1

考虑像素值来定义该线的粗细并避免舍入问题。

这是渐变的更新版本，具有更好的语法和线条粗细作为 CSS 变量：

html {
 --l: 3px;
 background: linear-gradient(225deg, 
  #F5ED32 0 10%, #000 0 calc(10% + var(--l)), 
  #F5ED32 0 20%, #000 0 calc(20% + var(--l)), 
  #F3130C 0 30%, #000 0 calc(30% + var(--l)),
  #F3130C 0 40%, #000 0 calc(40% + var(--l)), 
  #3CB9CA 0 50%, #000 0 calc(50% + var(--l)),
  #3CB9CA 0 60%, #000 0 calc(60% + var(--l)),
  #000    0 70%, #fff 0 calc(70% + var(--l)), 
  #000    0 80%, #fff 0 calc(80% + var(--l)), 
  #fff    0 90%, #000 0 calc(90% + var(--l)),
  #fff    0);
 
 height:100%
}

CSS 渐变跳跃颜色

CSS Gradient skipping colors

css

linear-gradients