margin外边距负值解决border边框重叠加粗问题

新酱
148
文章
37
评论
2020年6月15日17:31:40 评论 3,017 396字阅读1分19秒

当我们使用边框的时候,如果盒子相邻在一起,就会造成边框重叠加粗的问题,原本的1px的边框,重叠就会变成2px,造成加粗的效果。

边框重叠实例

下面是多个盒子边框重叠的实例。

margin外边距负值解决border边框重叠加粗问题

可以看到右边框与左边框重叠,下边框与上边框重叠,造成加粗。

边框重叠实例代码

margin负值

我们知道边框重叠是因为同一位置有两个边框,所以只要边框不在同一位置就能解决边框重叠的问题,这就是margin负值来解决了。

我们给所有的盒子一个margin-right: -1px;这样所有盒子都向左移动了1px,导致边框的位置发生变动,边框不在重叠,这样就解决了。同理,上下的边框重叠只需要一个margin-top: -1px;就可以了。

margin负值实例

margin外边距负值解决border边框重叠加粗问题

可以看到边框都不在重叠了。

margin负值实例代码

 

  • 版权声明: 发表于 2020年6月15日17:31:40
  • 转载注明:https://www.xiaorenjc.net/program/front/css/1402

您必须才能发表评论!