在渲染多个渐变时，Chrome会在两者之间留下空白/间隙

Question

我正在读Lea Verou的书“CSS Secrets”。

有圆角的径向多个渐变的示例： http://dabblet.com/gist/24484257bc6cf7076a8e

IE11，Edge和FF按预期正确显示。但是Chrome会在块内创建奇怪的边框。 我不明白为什么。它看起来像一个bug。任何人都可以解释这种行为，可能这只是Blink规范的一部分吗？

div {
	background: #58a;
	background:	radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
	            radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
	            radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
	            radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
	background-size: 50% 50%;
	background-repeat: no-repeat;
	
    width:4em;
    height:4em;
	padding: 1em 1.2em;
	max-width: 12em;
	color: white;
	font: 130%/1.6 Baskerville, Palatino, serif;
}

<div></div>

Answer 1

我没有任何官方消息来支持这个答案（还没有，我试图找到并将在此处添加，如果我找到了）但我在过去看过Chrome中的类似问题他们似乎因为Chrome中的计算值是如何舍入的。这里正在进行舍入，因为X轴和Y轴的背景大小均为50％，50％的计算值为分数。计算在下面的代码段中作为内联注释提供。

Blink / WebKit似乎将计算值向下舍入，而不管它是否大于0.5。在本演示中，元素的总高度为124.8px，宽度为133.12px。因此，50％的值变为62.4px和66.56px（它们将向下舍入到62和66px）。代码段中的第三个div将这些值明确设置为background-size，我们可以看到其输出与第一个（具有background-size: 50% 50%）相同，从而证明了解释。

当这些值向下舍入时，水平背景占用的实际面积为132px（比实际宽度小1.12px），垂直方向为124px（比实际高度小0.8px）。因此，它之间留下了一个空隙。

This blog post by John Resig还提供了有关如何在浏览器中处理舍入的一些见解。正如我们所看到的，Blink / WebKit正在四舍五入，而IE似乎正在四舍五入。向上舍入意味着计算值将变为63px和67px并且这不会明显显示任何问题，因为所有方面的颜色都相同，因此它们只是重叠并填充空间（当我们明确设置这些值时，Chrome也没有显示任何问题对于背景大小 - 请参阅第二个div）。 Firefox似乎有一个全面的舍入逻辑，似乎围绕一些，而另一些则按顺序向下舍入以完全填充空间，因此也没有显示任何问题。

div {
	background: #58a;
	background:	radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
	            radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
	            radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
	            radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
	background-size: 50% 50%;
	background-repeat: no-repeat;
	
    width:4em;            /* 83.2px */
    height:4em;           /* 83.2px */
	padding: 1em 1.2em;   /* left/right padding = 24.96px, top padding = 20.8px */
	max-width: 12em;
	color: white;
	font: 130%/1.6 Baskerville, Palatino, serif;  /* font-size = 130% of 16px = 20.8px */
}

/* so,
total width = 83.2px + (24.96px * 2) = 133.12px (50% = 66.56px)
total height = 83.2px + (20.8px * 2) = 124.8px (50% = 62.4px)
*/

div:nth-of-type(2) {
  background-size: 67px 63px;
}
div:nth-of-type(3) {
  background-size: 66px 62px;
}

div{
  display: inline-block;
  margin: 10px;
}

<div></div>
<div></div>
<div></div>

仅径向渐变不是这种情况，它也会出现线性渐变。

div {
	background: #58a;
	background:	linear-gradient(red, red) top left,
	            linear-gradient(blue, blue) top right,
	            linear-gradient(green, green) bottom right,
	            linear-gradient(tomato, tomato) bottom left;
	background-size: 50% 50%;
	background-repeat: no-repeat;
	
    width:4em;            /* 83.2px */
    height:4em;           /* 83.2px */
	padding: 1em 1.2em;   /* left/right padding = 24.96px, top padding = 20.8px */
	max-width: 12em;
	color: white;
	font: 130%/1.6 Baskerville, Palatino, serif;  /* font-size = 130% of 16px = 20.8px */
}

/* so,
total width = 83.2px + (24.96px * 2) = 133.12px (50% = 66.56px)
total height = 83.2px + (20.8px * 2) = 124.8px (50% = 62.4px)
*/

div:nth-of-type(2) {
  background-size: 67px 63px;
}
div:nth-of-type(3) {
  background-size: 66px 62px;
}

div{
  display: inline-block;
  margin: 10px;
}

<div></div>
<div></div>
<div></div>

还有图像。

div {
	background: #58a;
	background:	url(http://lorempixel.com/100/100/animals/1) top left,
	            url(http://lorempixel.com/100/100/animals/2) top right,
	            url(http://lorempixel.com/100/100/animals/3) bottom right,
	            url(http://lorempixel.com/100/100/animals/4) bottom left;
	background-size: 50% 50%;
	background-repeat: no-repeat;
	
    width:4em;            /* 83.2px */
    height:4em;           /* 83.2px */
	padding: 1em 1.2em;   /* left/right padding = 24.96px, top padding = 20.8px */
	max-width: 12em;
	color: white;
	font: 130%/1.6 Baskerville, Palatino, serif;  /* font-size = 130% of 16px = 20.8px */
}

/* so,
total width = 83.2px + (24.96px * 2) = 133.12px (50% = 66.56px)
total height = 83.2px + (20.8px * 2) = 124.8px (50% = 62.4px)
*/

div:nth-of-type(2) {
  background-size: 67px 63px;
}
div:nth-of-type(3) {
  background-size: 66px 62px;
}

div{
  display: inline-block;
  margin: 10px;
}

<div></div>
<div></div>
<div></div>

  

注意：我一直想发布一个自我Q＆amp; A现在已经记录了这种行为，所以非常感谢你提问：）