css - 奇怪的边框效果

Question

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

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

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

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

有什么想法会出现这个问题以及如何解决？

Answer 1

这是因为边界边缘不是在水平或垂直的直线上相交，而是在对角线中，从内框的角开始，到包括边框在内的框的角结束（在这种情况下，这意味着边框完成一个像素到它开始的左侧和右侧）。如果您将侧边框更改为更宽，则会更清楚发生了什么。

这是一个快速的图像来说明：

边界沿红线连接。

至于解决方案 - 您可能需要一个额外的元素来包装以提供该底部边框，或者摆脱您的 1px 侧边框。恐怕也不是理想的解决方案。