奇怪的边界效应

时间:2012-07-13 11:24:19

标签: css jquery-mobile border

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

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

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

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

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

screenshot

1 个答案:

答案 0 :(得分:1)

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

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

border joins

边框沿着红线连接。

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