html - 线性渐变渲染问题firefox

Question

我正在尝试绘制几个不同大小的网格，但我遇到了 Firefox 的问题 -linear-gradient在很多地方都对我造成了破坏。

它在提供任何单位（px/mm/%/rounded/float）的 Google Chrome 上都可以正常工作，但它在 Firefox 上做了一些有趣的事情。我尝试过使用不同的单位/舍入/前缀/3d hack，但这些都不起作用。

div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right, black 1px, transparent 1px),
    linear-gradient(to bottom, black 1px, transparent 1px);
  background-size: 5mm 5mm;
}

<div></div>

标签： htmlcssfirefoxlinear-gradients

Answer 1

1px重复渐变应该会产生更好的结果，但是当涉及到像渐变这样的小值时，它总是很棘手

div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: 
    repeating-linear-gradient(to right,  black 0 1px, transparent 0 5mm),
    repeating-linear-gradient(to bottom, black 0 1px, transparent 0 5mm);
}

<div></div>

你也可以在这里考虑一个 SVG（调整 viewBox、宽度和高度或矩形，直到你得到一个好的结果）

div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: 
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'> <rect x='0' y='0' width='1' height='100%' /> <rect x='0' y='0' width='100%' height='1'/></svg>")
    0 0/5mm 5mm;
}

<div></div>

也像下面只有 SVG：

svg {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
      <rect x='0' y='0' width='1' height='100%' /> 
      <rect x='0' y='0' width='100%' height='1'/>
    </pattern>
  </defs>
  <rect width="3000" height="3000" fill="url(#grid)" />
</svg>