html表格边框颜色-css-边框重叠问题已解决

bendan520 2023年8月25日 html 0

相邻元素添加边框后，就会出现边框加粗的效果，但实际中我们需要的是边框不加粗的效果。

代码示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            float: left;
            width: 100px;
            height: 200px;
            list-style: none;
            border: 1px solid pink;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

页码疗效：

重叠加粗边框解决方案：margin负值

border值设置为1px，margin-left:-1，左边连接1px就可以了：

代码示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -1px;
            list-style: none;
            border: 1px solid pink;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

页码疗效：

键盘悬浮框变色，疗效不完整

最后一个包正常显示，边框全部变色：

然而其他包的右边框颜色没有变化：

原因：左边袋子的边框挡住了右边相邻袋子的边框。 解决方案1：添加position:relative；

如果包没有定位，可以在键盘浮动时给包添加相对定位html表格边框颜色，因为相对定位的包会挡住普通包html表格边框颜色，不设置偏转位置不会移动。

代码示例3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -1px;
            list-style: none;
            border: 1px solid pink;
        }
        
        li:hover {
            position: relative;
            border-color: darkgreen;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

解决方案2：添加z-index：1；

如果为袋子添加了相对定位，则可以设置键盘浮动时袋子更有层次感。 如果没有设置z-index，则默认为z-index：0

代码示例4：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            position: relative;
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -1px;
            list-style: none;
            border: 1px solid pink;
        }
        
        li:hover {
            z-index: 1;
            border-color: darkgreen;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

页码疗效：