5

似乎当您有一个具有不同大小/颜色边框的元素时，您会看到一条非常奇怪的锯齿线。我以前从未注意到这一点，但是当我注意到这个（并不是真的想说“小故障”）奇怪的事件时，正在查看 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;
}

有人注意到这一点/知道为什么会发生吗？

4

3 回答 3

4

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

想象一个木制相框，你不是用四块长方形的木头来制作一个框架，而是用四块梯形的木头把它们放在一起。当您在一侧设置较大的宽度时，它会沿对角线将其向内渲染到框的角落。

它看起来很糟糕的原因是边界之间的抗锯齿从来都不是很好。

选择

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

于 2012-06-04T18:30:05.257 回答
3

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

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

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

于 2012-06-04T18:32:12.720 回答
2

我只是想建议在边框上使用具有较大边框宽度的 box-shadow 以避免“锯齿线”。对我有用，希望它有帮助:)

div {
    height            : 25px;
    width             : 50px;
    background        : #eee;
    border-style      : solid;
    border-color      : green;
    border-width      : 3px 3px 3px 0px;
    box-shadow:-15px 0px black;
}
于 2014-05-28T13:41:49.077 回答