CSS 边框锯齿状，带有不同大小/颜色的边框

Question

似乎当您有一个具有不同尺寸/颜色边框的元素时，您会看到一条非常奇怪的锯齿线。我以前从未注意到这一点，但是当我注意到这个(真的不想说“故障”)奇怪的事情时，正在看 Vimeo 的 super 热门新设计。

因此，如果您有一个 div，其样式如下所示，您会注意到一个像素步进(几乎就像它被设置为嵌入，而不是实心...)

div {
    height            : 25px;
    width             : 50px;
    background        : #eee;
    border-style      : solid;
    border-color      : green;
    border-left-color : black;
    border-width      : 3px 3px 3px 15px;
}

有人注意到这个/知道为什么会这样吗？

Answer 1

发生这种情况的原因是它在框周围创建了一个“框架”。

想想一个木制相框，您不用四 block 矩形木头来制作一个框架，而是使用四 block 梯形木 block 并将它们放在一起。当您在一侧设置较大的宽度时，它会沿对 Angular 线向内朝向框的一 Angular 呈现。

它看起来不好的原因是边界之间的抗锯齿效果一直不好。

备选

如果您不想那样裁剪边框，您可以只执行 div:before{border-left: 15px solid #000;}。