我创建了一个非常简单的测试用例来演示我的问题(可在 Firefox 和 Chrome 中重现,表明这是有意为之)
div
{
border: 1px solid black;
border-left: 250px solid white;
}
<div>text</div>
如果您运行上面的代码片段,我希望您会注意到黑色边框远非纯色,并且实际上在左侧变得严重褪色。为什么?
最佳答案
当初始边框宽度略有变化时,您遇到的问题很容易得到解释。
边界沿对 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>
关于html - 添加左边框时,纯黑色边框会以某种方式消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46142057/