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;}。

Answer 2

这不是"故障"——这是边界的工作方式。它们对角线连接。

如果你更进一步，创建一个没有高度和宽度但边框很大的<div>，你可以看到结果 - http://jsfiddle.net/mFzrA/

顺便说一句 - 这是用于创建纯CSS三角形和语音气泡的技术。你只需使 3 个边框透明，第 4 个边界给你一个漂亮的三角形。

Answer 3

我只是想建议在边框宽度更大的边框上使用框阴影以避免"锯齿线"。对我有用，希望对:)有所帮助

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