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。考虑如何定义cascading order和how source-ordered elements with the same stack level stack with one another，这似乎是违反直觉的，但这就是如何定义背景分层顺序。

但是这里的分层顺序并不重要，因为每种梯度的彩色区域都会相互重叠。您需要添加background-position和background-size声明以防止渐变相互重叠的真正原因是gradients have no intrinsic size，因此they will all scale to cover the entire box by default。

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

1 个答案: