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/

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

Answer 3

我只是建议在边框宽度较大的边框上使用框阴影，以避免＆＃34;锯齿状线＆＃34;。适合我，希望它有所帮助：）

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

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

3 个答案: