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

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

如果您谈论的是多个渐变的分层，如每个声明中的逗号分隔值，那么 the layers are painted front-to-back. It may seem counter-intuitive considering how the cascading order is defined and how source-ordered elements with the same stack level stack with one another，但这正是背景分层顺序的定义方式。

但是这里的分层顺序无关紧要，因为无论哪种方式，每个渐变的彩色区域都会相互重叠。您需要添加 background-position 和 background-size 声明以防止渐变相互重叠的真正原因是 gradients have no intrinsic size, and so they will all scale to cover the entire box by default.

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

what's the rule to render when linear gradients overlap?

css

linear-gradients