无卡顿 CSS 条纹 | CSS-Tricks

当我想到在 CSS 中创建条纹时，我的脑海中立即浮现出 repeating-linear-gradient 和硬停止渐变。通过使用相同的颜色在两个颜色停止之间，您可以创建一条条纹，并使用不同的颜色在两个颜色停止之间（共享中间的颜色）创建另一条（或更多条）条纹。

就像这样

background: repeating-linear-gradient(
  45deg,
  black,
  black 10px,
  #444 10px,
  #444 11px
);

这将在黑色背景上创建 10 像素间隔的倾斜深灰色条纹。

但这是它在我的屏幕上渲染的方式

您可以看到渲染卡顿的地方，其中一两条条纹看起来比其他条纹更亮更细吗？我不知道为什么。我假设这与次像素渲染或类似的东西有关。这并不难复制。不仅仅是这两种颜色或这种特定的角度，几乎所有使用 repeating-linear-gradient 创建的条纹都会出现这种情况。不过，当条纹更粗时（例如，5px 或更粗），卡顿现象就不那么明显了。

我制作了一些示例。这种带有较紧条纹且朝另一个方向的示例尤其常见

我前几天需要这样做，发现卡顿现象，并记起了我们条纹文章中的这个小注释。它相当于：不要使用 repeating-linear-gradient。只需使用 linear-gradient，设置 background-size 并让它重复。的确，这样做似乎能解决问题。问题在于…… 您要将 background-size 设置为多大？如果条纹是垂直或水平的，那么将其弄脏相对容易。但是如果条纹成角度…… 计算完美的宽度×高度很棘手。我猜这与勾股定理有关，但我在这方面并不擅长。

所以，您该怎么办呢？

使用这个不错的生成器工具。

它会执行必要的任何复杂数学运算以使其正确。您可以在此处查看未压缩的 JavaScript 代码。搜索 / GET BACKGROUND SIZE / 以查看正在进行的所有数学运算。无论它在那里做了什么，条纹都会完美地显示出来。

有点可惜 repeating-linear-gradient 没有更好的视觉输出，因为它更容易理解，但嘿，你必须做你必须做的事情。

Chris Morgan

# 2021 年 2 月 1 日

CSS 条纹中卡顿现象的主要原因是累计的次像素误差不同，因为您可能忘记了在学校学到的所有三角学知识。

您定义了 45° 的角度，这意味着每移动 1 像素，您在水平和垂直轴上的移动仅为 (√2÷2) 像素。结合次像素渲染，这意味着您渲染的线偏移的像素分数随着每条新线的变化而变化——例如，第一条可能约为 0.707 像素，然后是 0.414 像素，然后是 0.121 像素，然后是 0.828 像素，然后是 0.536 像素，等等。（这些取自每个 √2÷2×i 的小数部分，其中 i 是连续的自然数。）

您可以通过确保事物在 x 轴和 y 轴上的像素边界处命中来修复此类误差。在 45° 时，这意味着您应该将所需的水平和垂直周期乘以 √2，以便在该 45° 轴上，10 像素的周期将变为 14.142143562373059504 像素。（自己决定精度；我建议不要低于单精度，这意味着大约八位有效数字。）

（现在，在实践中，事情变得比这更奇怪，而且误差通常看起来不像您从我的解释中预期的那么随机，因为浏览器实际上只对某种超级采样的次像素渲染进行了有限的处理，而不是我所说的无限精度次像素渲染。）

现在，即使您修复了这个问题，重复渐变仍然有点不可靠，因为浏览器在处理它们时仍然会做一些奇怪的事情，虽然随着时间的推移，它们一直朝着更健康的方向发展。现在，重复仔细大小的线性渐变无疑更健壮，而且通常更容易理解——特别是如果您想要除 45° 之外的角度，那么您需要更复杂的三角学来将其与像素网格匹配。（是的，学校级别的三角学在渲染到光栅设备时具有可靠的实际应用。）

最后一点：第二个示例中误差最明显的原因实际上是因为“线”部分是渐变，因为第三个停止点在 5 像素处，而应该在 4 像素处。这往往会放大次像素误差的可见性。

Terry Hale

评论的永久链接# 2021 年 2 月 1 日

这是我近来看到的最好的文章评论。

Camillo

# 2021 年 2 月 1 日

@chris 这条评论比文章本身更让我大开眼界！！！但我需要再读 100 次…….

Peter Laxalt

# 2021 年 2 月 28 日

如果有人正在使用 Styled Components，我从上面发布的源代码中创建了一个实用程序函数来生成条纹。请随时在下面使用它。

用法

.striped-element {
  ${gradientStripesCss(0, [
     {
        size: 2,
        color: "#fff"
     },
     {
        size: 30,
        color: "transparent"
     },
  ])};
}

函数

import { css } from "styled-components";

type gradientStripes = {
  size: number,
  color: string,
  color_name?: string
}

export function gradientStripesCss(gradientAngle: number = 45, gradientStripes: gradientStripes[] = [
  {
    size: 30,
    color: '#e34',
    color_name: '',
  },
  {
    size: 30,
    color: '#4a4',
    color_name: '',
  },
], gradientRatio: boolean = true) {
  if (gradientAngle > 180) {
    gradientAngle = gradientAngle - 180;
  }

  var stripes_size_sum = 0;
  for (var i = 0; i < gradientStripes.length; i++) {
    stripes_size_sum += gradientStripes[i].size;
  }

  //////////////////// GET BACKGROUND SIZE ///////////////////////////////
  var bg_size_x: number;
  var bg_size_y: number;

  bg_size_x = stripes_size_sum * 2;

  if (gradientAngle > 0 && gradientAngle <= 45) {
    bg_size_x /= 2;
  }
  else if (gradientAngle > 45 && gradientAngle < 90) {
    bg_size_x *= Math.tan(gradientAngle * Math.PI / 180) / 2;
  }
  else if (gradientAngle > 90 && gradientAngle <= 135) {
    bg_size_x *= Math.tan((180 - gradientAngle) * Math.PI / 180) / 2;
  }
  else if (gradientAngle > 135 && gradientAngle < 180) {
    bg_size_x /= 2;
  }

  if (gradientRatio && !(gradientAngle == 0 || gradientAngle == 90 || gradientAngle == 180)) {
    bg_size_x = bg_size_x / Math.sin(gradientAngle * Math.PI / 180);
  }


  bg_size_y = bg_size_x;
  if (gradientAngle > 90 && gradientAngle < 180) {
    bg_size_y = bg_size_x * Math.tan((180 - gradientAngle) * Math.PI / 180);
  }
  else if (gradientAngle != 90 && gradientAngle != 0 && gradientAngle != 180) {
    bg_size_y = bg_size_x * Math.tan(gradientAngle * Math.PI / 180);
  }


  if (bg_size_y > bg_size_x) {
    var temp = bg_size_x;
    bg_size_x = bg_size_x * bg_size_x / bg_size_y;
    bg_size_x = parseFloat(bg_size_x.toFixed(2));
    bg_size_y = temp;
  }

  var bg_size_x_float = bg_size_x.toString();
  var bg_size_y_float = bg_size_y.toString();

  bg_size_x = parseFloat(parseFloat(bg_size_x_float).toFixed(2));
  bg_size_y = parseFloat(parseFloat(bg_size_y_float).toFixed(2));


  //////////////////// GET PERCENT CODE ///////////////////////////////

  var percents = [];
  for (var i = 0; i < gradientStripes.length; i++) {
    percents[i] = (gradientStripes[i].size * 100 / stripes_size_sum) / 2;
  }

  var percents_code = '';
  var percents_code_text = '';
  for (var i = 0; i < gradientStripes.length * 2; i++) {
    var percents_sum = 0;
    for (var j = 0; j <= i; j++) {
      var k = j;
      if (j >= gradientStripes.length) {
        k = j - gradientStripes.length;
      }
      percents_sum += percents[k];
    }

    var percents_sum_float = percents_sum.toString();

    percents_sum = parseFloat(parseFloat(percents_sum_float).toFixed(2).replace(/\.0+$/, ''));

    var j = i;
    if (j >= gradientStripes.length) {
      j = j - gradientStripes.length;
    }

    var k = j + 1;
    if (k >= gradientStripes.length) {
      k = k - gradientStripes.length;
    }

    var color_name = gradientStripes[j].color;
    if (gradientStripes[j].color_name) {
      color_name = gradientStripes[j].color_name;
    }

    var color_name2 = gradientStripes[k].color;
    if (gradientStripes[k].color_name) {
      color_name2 = gradientStripes[k].color_name;
    }

    if (i == gradientStripes.length * 2 - 1) {
      percents_code += gradientStripes[j].color + ' ' + percents_sum + '%';
      percents_code_text += color_name + ' ' + percents_sum + '%';
    }
    else {
      percents_code += gradientStripes[j].color + ' ' + percents_sum + '%, ' + gradientStripes[k].color + ' ' + percents_sum + '%, ';
      percents_code_text += color_name + ' ' + percents_sum + '%, ' + color_name2 + ' ' + percents_sum + '%, ';
    }
  }

  return css`
    background-image: linear-gradient(${gradientAngle}deg, ${percents_code}); 
    background-size: ${bg_size_x}px  ${bg_size_y}px;
  `;
};

此评论主题已关闭。如果您有重要信息要分享，请联系我们。