css - 径向渐变显示一些背线，间隙，空格或边距

Question

我是radial-gradient的新手，我不知道这些多维数据集之间的背线或空格是什么？如何删除它们？

* {margin: 0; outline: 0; border: 0;}
.round {
  background: radial-gradient(circle at 0 100%, rgba(204, 0, 0, 0) 70%, #c00 71%),
              radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), 
              radial-gradient(circle at 100% 0, rgba(204, 0, 0, 0) 70%, #c00 71%), 
              radial-gradient(circle at 0 0, rgba(204, 0, 0, 0) 70%, #c00 71%);
  background-position: bottom left, bottom right, top right, top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  width: 300px;
  height: 300px;
  padding: 10%;
  transform: rotate(45deg);
}
p {
  transform: rotate(-45deg);
  width: 100px;
  margin: 100px;
}

<div class="round">
  <p>By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case,</p>
</div>

Answer 1

您的摘要中有两个问题，当我们修复中间出现的怪异间隙或线条时，这些问题将完全消失。


问题1：您正在元素上设置padding: 10%而不是固定值。当我们以百分比形式给出值时，就四舍五入逻辑而言，我们受制于UA。每个UA都有自己的四舍五入逻辑。例如，框的包含块的宽度为510px，现在51px为10％。元素的实际宽度包括其填充，因此此处将变为351px，并且当UA尝试为background-size计算宽度的50％时，结果值为175.5px。这就是渔获物所在的地方。 Some browsers round it down to 175px, some like FF has unique logic which rounds down some but rounds up the others, some just round it up etc。将该值四舍五入后，两个背景块的总大小变为350px，但框的实际宽度为351px，此1px的差异就是您看到的间隙。
问题2：在元素上应用变换时，总是会出现这种差距。我的感觉是，这与元素的背面有关，因为当我们将backface-visibility设置为hidden时，它会消失。我们在答案的底部添加了详细的说明。 （这已在Chrome中进行了测试，但应该可以全部使用。如果没有，则没有解决方案。）


在以下代码段中，我已修复了这两个问题，您可以看到它的工作方式。 backface-visibility: hidden还有一个额外的收获。在容器元素上设置此元素时，该元素内的所有文本都会变得模糊。因此，最好使用伪创建背景，因为它不会影响p元素的显示。

* {
  margin: 0;
  outline: 0;
  border: 0;
}
.round {
  position: relative;
  width: 300px;
  height: 300px;
  padding: 30px;
}
.round:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  background: radial-gradient(circle at 0 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 0, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 0 0, rgba(204, 0, 0, 0) 70%, #c00 71%);
  background-position: bottom left, bottom right, top right, top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  transform: rotate(45deg);
  backface-visibility: hidden;
  z-index: -1;
}
p {
  width: 125px;
  margin: 85px;
}

<div class="round">
  <p>By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case,</p>
</div>

作为 mentioned by vals' in his comment，也可以通过将元素的渲染从CPU移到GPU层来解决问题2。通常通过在转换堆栈中添加 translateZ(1px)来完成此操作。正如他还指出的那样，在某些机器中，这也改善了抗锯齿功能。

* {
  margin: 0;
  outline: 0;
  border: 0;
}
.round {
  position: relative;
  width: 300px;
  height: 300px;
  padding: 30px;
  background: radial-gradient(circle at 0 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 0, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 0 0, rgba(204, 0, 0, 0) 70%, #c00 71%);
  background-position: bottom left, bottom right, top right, top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  transform: rotate(45deg) translateZ(1px);
}
p {
  transform: rotate(-45deg) translateZ(-1px);
  width: 125px;
  margin: 85px;
}

<div class="round">
  <p>By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case,</p>
</div>

问题2的解释：

这是什么可能是第二个问题的原因的更详细的说明。感谢 vals在提出这个原因方面的出色帮助。

假设两个不同的渐变直接渲染到画布上，而没有中间缓冲区。沿着作为两个渐变之间边界的对角线，有一些像素仅被第一渐变覆盖了50％。之后，第二个渐变也将覆盖50％。

这应等于一个完整的像素（50％+ 50％）。但是渲染它的方法是使用0.5的alpha。问题在于，在这种情况下，该运算是一个乘法而不是加法，并且用0.5的alpha渲染两次将只给出0.75的alpha，而不是1。因此，像素在某种程度上仍是透明的，并且背景显示。

可以通过启用Chrome Dev控制台中的“显示油漆矩形”和“显示图层边框”选项来进行验证。对于相关代码段，不会创建任何图层。也就是说，该元素以其旋转形式绘制，因此两个渐变图像之间的分离点沿对角线。由于它沿着对角线，因此必须将50％的像素分配给每个图像。

在旋转之前，GPU渲染是在中间缓冲区（或图层）上完成的，因此像素落在均匀边界上。它还可以使用子像素渲染。

也可以使用Chrome Dev控制台进行验证。附加任何3D变换属性（例如 backface-visibility， translateZ）都会导致创建图层。现在，该元素首先以其正常形式绘制（不旋转），然后单独旋转图层。因此，分离点沿直线而不是对角线，因此不需要50-50的逻辑。当我们检查答案中的两个片段时，我们可以在元素周围看到一个橙色的边框（该片段不存在）。这是图层的边框（我们通过之前的设置启用了它的显示）。