css如何去掉重叠部分的边框

最新推荐文章于 2024-07-10 18:11:01 发布

就像风1样

最新推荐文章于 2024-07-10 18:11:01 发布

阅读量2.7k

点赞数

分类专栏： css CSS样式专栏文章标签： css 边框合并

本文链接：https://blog.csdn.net/qq_42221334/article/details/88343283

版权

本文探讨了CSS中边框重叠的两种情况：div、ul等元素边框重叠和table表格边框重叠。针对前者，可以通过设置margin负值避免边框重叠；对于后者，使用border-collapse: collapse可以合并边框，实现单线边框效果。

摘要由CSDN通过智能技术生成

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

边框重叠可以分为两种情况，分别为：

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

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>边框重叠</title>
<style>

ul li {
    list-style: none;
}
.demo {
    width: 310px;
    height: 205px;
    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>