径向梯度显示一些背线，间隙，空间或边缘 [英] Radial gradient shows some backlines, gap, spaces or margins

问题描述

我是新的与径向渐变，我不知道什么是那些背线或空格之间的立方体之间？如何删除它们？

I am new with radial-gradient and I don't know what are those back lines or spaces between the cubes? How to remove them?

* {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>

推荐答案

在你的代码片段有两个问题，当我们修复那些奇怪的差距或线显示在中间会完全失效。

There were two problems in your snippet and when we fix both those that weird gap or line that shows up in the middle would be gone completely..

• 问题1：您在元素上设置了 padding：10％固定值。当我们以百分比的形式给出价值时，我们在四舍五入的逻辑上处于UA的宽限。每个UA都有自己的舍入逻辑。例如，框的包含块的宽度是 510px ，现在10％来到 51px 。元素的实际宽度包括其填充，因此这里它将变为 351px ，当UA尝试计算 background-size ，结果值将为 175.5px 。 这是捕获的地方 。 一些浏览器将其舍入为 175px ，有些像FF有独特的逻辑，向下舍入一些，但是向上舍入其他，有些只是围绕它等等。当值向下取整时，两个背景图片的总大小变为350像素，但框的实际宽度为351像素，这个1像素差异是您看到的差距。


• 问题2：当我们对元素应用变换时，这种差距总是出现。我的感觉是，这与元素的背面有关，因为当我们设置 backface-visibility 到 hidden 。我们已在 的底部添加了详细说明。 （ ）

• Issue 1: You were setting padding: 10% on the element instead of a fixed value. When we give the value as a percentage, we are at the mercy of the UA in terms of rounding-off logic. Each UA has its own rounding-off logic. Take for example the width of the box's containing block is 510px, now 10% comes to 51px. Actual width of an element includes its padding, so here it will become 351px and when UA tries to calculate 50% of the width for background-size, the resulting value will be 175.5px. This is where the catch is. 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. When the value is rounded down, the total size of the two background pieces becomes 350px but the actual width of the box is 351px and this 1px difference is the gap that you see.
• Issue 2: When we apply a transform on an element, this sort of gap always comes up. My feeling is that this has something to do with the backface of the element because It goes away when we set backface-visibility to hidden. We have added a detailed explanation at the bottom of the answer. (This is tested in Chrome but should work in all. If it doesn't then there is no solution.)

在下面的代码段中，我已经解决了这两个问题，你可以看到它是如何工作正常。还有一个额外的捕获与 backface-visibility：hidden 。当您在容器元素上设置此元素时，该元素中的所有文本都会模糊。因此，最好使用伪造来创建背景，因为它不会影响 p 元素的显示。

In the below snippet, I've fixed both these issues and you can see how it works fine. There is also an extra catch with the backface-visibility: hidden. When you set this on a container element, all the text that is within that element get blurred. So, it is better to create the background using a pseudo as it would not affect the display of the p element.

* {
  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>

As 在他的评论中提到的，问题2 也可以通过将元素的渲染从CPU移动到GPU层来解决。通常通过向转换堆栈添加 translateZ（1px）来完成此操作。

As mentioned by vals' in his comment, the Issue 2 can also be solved by moving the rendering of the element from the CPU to the GPU layer. This is normally done by adding a translateZ(1px) to the transform stack. As he also points out, in some machines this improves the anti-aliasing too.

* {
  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 为他提出这个理由的极好帮助。

Here is a more detailed explanation of what could be the cause of the second issue. Thanks to vals for his excellent help in coming up with this reason.

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

Let's say that the two different gradients are rendered directly to the canvas, without an intermediate buffer. Along the diagonal line that is the boundary between the two gradients, there are pixels that are covered only 50% by the first gradient. And later, will be covered also at 50% by the second gradient.

这应该是一个完整的像素（50％+ 50％）。但 的渲染方式是使用0.5的alpha。问题是，在这种情况下， 操作是一个乘法 ，而不是一个加法，渲染两次，alpha为0.5只会给出0.75的alpha，而不是因此像素在一定程度上仍然是透明的，而背景显示。

This should amount to a full pixel (50% + 50%). But the way to render it is with an alpha of 0.5. The problem is that in this case, the operation is a multiplication instead of an addition and rendering two times with an alpha of 0.5 will only give an alpha of 0.75, instead of 1. So the pixel is still transparent to some extent, and the background shows.

这可以通过启用显示绘制矩形和显示图层边框选项。对于有问题的 代码段，不会创建任何图层 。也就是说，元素 以旋转形式绘制 ，因此两个渐变图像之间的分离点沿着对角线。由于是沿对角线，因此必须为每个图片分配50％的像素。

This can be verified (sort of) by enabling the "Show Paint Rects" and "Show Layer Borders" options in the Chrome Dev console. For the snippet in question, no layers are created. That is, the element is painted in its rotated form and so the point of separation between the two gradient images is along a diagonal line. Since it is along a diagonal, 50% of the pixel must be allotted to each image.

GPU渲染 >在旋转之前在中间缓冲器（或层）上完成，因此像素落在偶数边界上。它也可以使用子像素渲染。

The GPU render is done on an intermediate buffer (or layer), prior to the rotation, and so the pixels fall on an even boundary. It could also use a sub-pixel render.

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

This can also be verified by using Chrome Dev console. Attaching any 3D transform properties (like backface-visibility, translateZ) result in the creation of a layer. Now, the element is first painted in its normal form (no rotation) and then the layer alone is rotated. So, the point of separation is along a straight line instead of a diagonal line and so there is no need for 50-50 logic. When we inspect the two snippets in the answer we can see an orange-ish border around the element (that won't be present for the snippet in question). This is the layer's border (we enabled its display via the earlier setting).

这篇关于径向梯度显示一些背线，间隙，空间或边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！