Question

我创建了一个非常简单的测试用例来演示我的问题（可以在Firefox和Chrome中重现，这表明这是故意的）

div
{   
    border: 1px solid black;
    border-left: 250px solid white;
}

<div>text</div>

如果您运行上面的代码片段，我希望您会注意到黑色边框远不是实心，实际上左侧会变得严重褪色。为什么呢？

Answer 1

当初始边框宽度略有变化时，可以轻松解释您遇到的问题边框以对角线相互连接，并且具有非常长的左边界将对角线连接拉出。抗锯齿导致你所描述的淡出。

div {
  border: 5px solid blue;
  border-left: 25px solid red;
}

<div>text</div>

作为创建淡出的连续示例：

div {
  border: 1px solid black;
  border-left: 1px solid white;
  margin-bottom: 2px;
}

div:nth-child(2) {
  border-left-width: 2px;
}

div:nth-child(3) {
  border-left-width: 5px;
}

div:nth-child(4) {
  border-left-width: 10px;
}

div:nth-child(5) {
  border-left-width: 25px;
}

div:nth-child(6) {
  border-left-width: 100px;
}

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

Answer 2

你是对的，这是预期的行为。它是由左边框和底部/顶部边框之间的宽度过渡引起的。看起来它变得更透明而不是更薄的原因是因为左下边框的宽度在0-1px之间，因此抗锯齿开始使其更平滑（你不能显示例如0.5px）。

我不确定我是否能以干净的方式描述它，所以我为你做了一个demo，希望能解释它是如何以及为什么会发生的。

HTML：

<div>text</div>

的CSS：

html {
  background-color: yellow;
}
div {   
  border: 200px solid black;
  border-left: 200px solid green;

  transition: border 5s ease-out;
}

html:hover div {
  border: 1px solid black;
  border-left: 200px solid white;
}

添加边框左侧时，黑色边框会以某种方式淡化

2 个答案: