css - 奇怪的边框效果

Question

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

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

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

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

对于这个问题的形成和解决方法有什么想法吗？

Answer 1

这是因为边框边缘不在水平或垂直直线上相交，而是在从内框的 Angular 开始到包括边框在内的框的 Angular 处结束的对 Angular 线上(在这种情况下，这意味着边框完成开始位置左右各一个像素)。如果您将侧边框更改得更宽，就会更清楚发生了什么。

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

边界沿红线连接。

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