线性渐变重叠时渲染的规则是什么？

Question

我想使用线性渐变来实现切角效果。只切一个角很简单：

body {
  background: #eac996;
}
.box {
  width: 100px;
  height: 100px;
  margin: 100px auto;
  padding: 20px;
  background-color: #fff;
  background: -webkit-linear-gradient(45deg, transparent 10px, #fff 10px);
  background: -moz-linear-gradient(45deg, transparent 10px, #fff 10px);
  background: -o-linear-gradient(45deg, transparent 10px, #fff 10px);
}

<div class="box"></div>

然后我尝试将相同的代码应用于其他三个角，但未能达到预期效果。

body {
  background: #eac996;
}
.box {
  width: 100px;
  height: 100px;
  margin: 100px auto;
  padding: 20px;
  background-color: #fff;
  background:
    -webkit-linear-gradient(45deg, transparent 10px, #fff 10px),
    -webkit-linear-gradient(135deg, transparent 10px, #fff 10px),
    -webkit-linear-gradient(225deg, transparent 10px, #fff 10px),
    -webkit-linear-gradient(315deg, transparent 10px, #fff 10px);
  background:
    -moz-linear-gradient(45deg, transparent 10px, #fff 10px),
    -moz-linear-gradient(135deg, transparent 10px, #fff 10px),
    -moz-linear-gradient(225deg, transparent 10px, #fff 10px),
    -moz-linear-gradient(315deg, transparent 10px, #fff 10px);
  background:
    -o-linear-gradient(45deg, transparent 10px, #fff 10px),
    -o-linear-gradient(135deg, transparent 10px, #fff 10px),
    -o-linear-gradient(225deg, transparent 10px, #fff 10px),
    -o-linear-gradient(315deg, transparent 10px, #fff 10px);
}

<div class="box"></div>

正确的方法是避免这些线性梯度的重叠。如下

body {
  background: #eac996;
}
.box {
  width: 100px;
  height: 100px;
  margin: 100px auto;
  padding: 20px;
  background-color: #fff;
  background:
    -webkit-linear-gradient(45deg, transparent 10px, #fff 10px),
    -webkit-linear-gradient(135deg, transparent 10px, #fff 10px),
    -webkit-linear-gradient(225deg, transparent 10px, #fff 10px),
    -webkit-linear-gradient(315deg, transparent 10px, #fff 10px);
  background:
    -moz-linear-gradient(45deg, transparent 10px, #fff 10px),
    -moz-linear-gradient(135deg, transparent 10px, #fff 10px),
    -moz-linear-gradient(225deg, transparent 10px, #fff 10px),
    -moz-linear-gradient(315deg, transparent 10px, #fff 10px);
  background:
    -o-linear-gradient(45deg, transparent 10px, #fff 10px),
    -o-linear-gradient(135deg, transparent 10px, #fff 10px),
    -o-linear-gradient(225deg, transparent 10px, #fff 10px),
    -o-linear-gradient(315deg, transparent 10px, #fff 10px);
  background-position:
    bottom left,
    bottom right,
    top right,
    top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

<div class="box"></div>

我的问题是，当线性渐变重叠时，浏览器渲染的规则是什么？一些到规范的链接或对本主题的进一步阅读将有所帮助。

Answer 1

如果您谈论的是多个渐变的分层，就像每个声明中逗号分隔的值一样，那么层是从前到后绘制的。考虑到级联顺序是如何定义的，以及具有相同堆栈级别的源排序元素是如何相互堆叠的，这似乎有违直觉，但这只是背景分层顺序的定义方式。

但分层顺序在这里并不相关，因为无论哪种方式，每个梯度的彩色区域都会相互重叠。需要添加background-position和background-size声明以防止渐变相互重叠的真正原因是渐变没有内在大小，因此默认情况下它们都会缩放以覆盖整个框。