css怎么让边框不重叠?

css怎么让边框不重叠?下面本篇文章给大家介绍一下css去掉重叠部分边框的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

边框border属性是经常会用到的一个属性,它可以给元素添加边框;但两个相邻的元素在一起同时添加了边框,就会出现一个问题,边框会重叠在一起

1.png

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

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

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>边框重叠</title>
<style>
 
ul li {
    list-style: none;
}
.demo {
    width: 300px;
    height: 400px;
    margin: auto;
    padding: 10px;
    border: 1px solid red;
    margin-bottom:-1px;
}
.demo li {
    width: 100px;
    height: 100px;
    float: left;
    border: 1px solid #000000;
    margin:0px -1px -1px 0px;
}
</style>
</head>
<body>
<div class="demo">
    <ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
    </ul>
</div>
<div class="demo">
    <ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
    </ul>
</div>
</div>
 
</body>
 
</html>

效果图:

4.png

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

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

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

5.png

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

更多web前端知识,请查阅 HTML中文网 !!

以上就是css怎么让边框不重叠?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏