css - Chrome 在呈现多个渐变时在中间留下空白/间隙

Question

我正在阅读 Lea Verou 的《CSS secret 》一书。

有一个圆 Angular 径向多重渐变的例子: http://dabblet.com/gist/24484257bc6cf7076a8e

IE11、Edge 和 FF 按预期正确显示。但是 Chrome 在 block 内创建了奇怪的边框。我不明白为什么。它看起来像一个错误。谁能解释这种行为，这可能只是 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>

Note: I've been wanting to post a self Q & A for documenting this behavior for quite sometime now, so thank you for asking :)