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

Question

看起来,当你有一个具有不同大小/彩色边框的元素时,你会看到一个非常奇怪的锯齿状线发生.我之前从未注意到这一点,但是当我注意到这一点(不想说"故障")奇怪的事情时,我正在看Vimeo的超热门新设计.

因此,如果你有一个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

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

想象一下木制相框，您不是使用四块矩形木块来创建框架，而是使用 4 块梯形木块并将它们组合在一起。当您在一侧设置较大的宽度时，它会沿对角线将其向内朝向框的角呈现。

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

选择

div:before{border-left: 15px solid #000;}如果您不希望像这样裁剪边框，则可以这样做。