html - 添加左边框时，纯黑色边框会以某种方式消失

Question

我创建了一个非常简单的测试用例来演示我的问题(可在 Firefox 和 Chrome 中重现，表明这是有意为之)

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

<div>text</div>

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

Answer 1

当初始边框宽度略有变化时，您遇到的问题很容易得到解释。
边界沿对 Angular 线相互连接，左边界很长，将对 Angular 线连接向外延伸。抗锯齿会导致您所描述的淡出。

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>