奇怪的边界效应

Question

我遇到过一个我觉得我以前找到（并已解决）的问题。但不记得是什么或如何。

我正在使用jQuery Mobile并主要重新设置它。部分原因是在导航项的底部放置一条粗实线。所以我覆盖了边框，所以我有一个左右1px边框，然后是10px底边框。但是底部边框是锯齿状的，看起来左边和右边都试图超过底边的一半而不是全部。

我附上了问题的截图（我已将底部边框增加到25px以使其更明显）。

 #id
   {
     border: #231F20 1px solid;
     border-top: none;
     border-bottom: #EE1E5C 25px solid;
   }

这个问题即将到来的想法以及如何解决？

Answer 1

这是因为边框边缘不是直线水平或垂直线相交，而是从内盒角落开始的对角线和包括边框在内的盒子角落处完成（在这种情况下，这意味着边框完成它开始的左侧和右侧的一个像素）。如果你将边框更改为更宽，那么发生的事情会更清楚。

这是一张快速图片来说明：

边框沿着红线连接。

至于解决方案 - 你可能需要一个额外的元素来包装以提供底部边框，或者摆脱你的1px侧边框。我担心这两种方法都不是理想的解决方案。