厚CSS边界不提供干净的矩形

Question

这似乎很简单，但令人惊讶的是，以前没有发现任何人遇到这个问题。看看这个小提琴：

http://jsfiddle.net/xvhw4/

它具有这样的厚的4px边框：

<div style="border: 1px solid #E3E3E3; border-top: 4px solid rgb(255, 153, 0);width: 300px; height: 250px;"></div>

如果注意到，顶部厚边框不会在干净的矩形中渲染。它是一个梯形，从上到下有小锥度。我检查了这是在Mac OS X和Windows上发生的，以及Firefox，Chrome和IE。您可以将其缩小到大约4倍，非常清楚地观察到这一点。

这是我可以解决的吗？为什么会发生这种情况？

Answer 1

这是一种骇客的方法，您可以修复干净的矩形顶部：

html

<div id="test_div"></div>

CSS

#test_div:before { 
    position:absolute; 
    width:100%; 
    padding:1px; 
    top:0; 
    content: '';
    left:-1px;
    background:#000; 
    height:1px; }
#test_div { 
    border: 1px solid #E3E3E3; 
    border-top:0; 
    width: 300px;
    height: 250px; 
    position:relative; }

jsfiddle

Answer 2

这是当您的边界不同的边界时的预期结果。

角边缘从外角到内角：

*****************************
**
**
* *
* *
*  **************************
*  *
*  *
*  *

如果角是对角线的，则内角将不匹配：

*****************************
**
* **
*  **
*  * **
*  *   **********************
*  *
*  *
*  *

如果角落直截了当，它们不会像您想要的那样重叠。浏览器以不同的角落重叠，因此在某些人中会得到：

*****************************
*  *
*  *
*  *
*  *
*  **************************
*  *
*  *
*  *

在其他方面，您会得到：

*****************************
*
*
*
*
*****************************
*  *
*  *
*  *

其他角落也是如此，但不一致。有些浏览器会使顶部边框重叠两侧，有些浏览器会使一个侧面重叠在顶部，而有些则会使双方都重叠。

要获得那种直角拐角，您只需要使用多个元素即可。您可以将一个元素仅用于顶部边框，也可以包裹两个元素并将顶端设置在外部元素上。