我遇到了一个我觉得以前发现(并解决)的问题。但不记得是什么或如何。
我正在使用 jQuery Mobile 并主要重新设计它的外观。其中一部分是在导航项的底部放置一条粗实线。所以我覆盖了边框,所以我有一个左右 1px 的边框,然后是 10px 的底部边框。但是底部边框是锯齿状的,看起来左右都试图超过底部边框的一半而不是全部。
我附上了问题的屏幕截图(我将底部边框增加到 25px 以使其更加明显)。
#id
{
border: #231F20 1px solid;
border-top: none;
border-bottom: #EE1E5C 25px solid;
}
对于这个问题的形成和解决方法有什么想法吗?
最佳答案
这是因为边框边缘不在水平或垂直直线上相交,而是在从内框的 Angular 开始到包括边框在内的框的 Angular 处结束的对 Angular 线上(在这种情况下,这意味着边框完成开始位置左右各一个像素)。如果您将侧边框更改得更宽,就会更清楚发生了什么。
这是一个快速的图像来说明:
边界沿红线连接。
至于解决方案 - 您可能需要一个额外的元素来包装以提供该底部边框,或者摆脱您的 1px 侧边框。恐怕都不是理想的解决方案。
关于css - 奇怪的边框效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11469545/