css如何去掉重叠部分的边框?(收藏)
发布日期:2021-06-21 05:17:42 浏览次数:6 分类:技术文章

本文共 988 字,大约阅读时间需要 3 分钟。

在前端开发中,边框border属性是经常会用到的一个属性,它可以给元素添加边框;但两个相邻的元素在一起同时添加了边框,就会出现一个问题,边框会重叠在一起(如下图),那么如何去掉重叠部分的边框?

首先小编在这里谢谢大家一直的支持,每天都会更新十个web前端基础内容,需要的可以关注我,另外也可以进我的web学习交流群,领取资料学习资料笔记,可以跟里面的小伙伴一起学习一起成长,不懂的问题也可以问我,随时给大家解答。再次感谢大家。

本篇文章就给大家介绍css解决边框重叠,即css去掉重叠边框的方法,让相邻的边框之间可以是单线的方式显示。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

边框重叠可以分为两种情况,分别为:

  • 1、div,ul等元素盒子设置边框后的重叠问题
  • 2、table表格设置边框后的重叠问题

下面我们就来介绍如何解决这些边框重叠问题的方法,用简单的代码示例来讲解

1、div,ul等元素盒子设置边框后的重叠问题

  
边框重叠

效果图:

在上例中,我们使用了margin属性的负值,设置元素的margin值为边框值的相反数,就可以把重叠的部分边框隐藏起来(被覆盖),让边框以单线的形式显示。margin负值其实是一个很常用的功能,很多特殊的布局方法都是依赖于它才可以实现的。

2、table表格设置边框后的重叠问题

 

table{ border-spacing: 0; border-collapse: collapse;}table td {           border: 1px solid #000; padding: 20px 30px;}

在表单中当我们添加了边框,又把每个单元格的边距去除后,表单就会出现边框重叠的问题,使得边框线变粗,这时我们就可以设置border-collapse: collapse来设置边框,它把重叠的边框合并在一起,成为一个边框,实现单线边框的效果。

效果图:

总结:以上就是本篇文章所介绍的css去掉重叠部分边框的方法,希望能对大家的学习有所帮助。更多相关教程请关注我!

转载地址:https://blog.csdn.net/lin123_00/article/details/105938244 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:CSS字体透明度怎么设置?
下一篇:如何使用HTML和CSS在图像上添加文字?(代码示例)

发表评论

最新留言

表示我来过!
[***.240.166.169]2024年03月26日 00时38分03秒