css-边框重叠问题解决

最新推荐文章于 2024-03-07 11:02:06 发布

零OO

最新推荐文章于 2024-03-07 11:02:06 发布

阅读量1.2w

点赞数 13

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/qq_39111074/article/details/119889168

版权

前端专栏收录该内容

220 篇文章 8 订阅

订阅专栏

本文介绍了如何处理HTML布局中相邻元素边框相交导致的边框加粗现象，通过设置负margin值避免边框重叠。同时，针对鼠标悬浮时边框颜色变化不全的问题，提出了两种解决方案：一是使用相对定位，二是调整元素的z-index，确保悬浮状态下边框颜色完整显示。

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

相邻元素都加上边框后，会出现边框加粗的效果，但实际中我们需要边框不加粗的效果，
代码示例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负值

边框值设置的是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>

页面效果：

鼠标悬浮边框变色效果不全问题

最后一个盒子显示正常，边框都变色了：

但是其他盒子右边框颜色没看到变化：

原因：右边的盒子边框压住了左边相邻的盒子的边框

解决方法一：添加position: relative;

如果盒子都没有加定位，可以鼠标悬浮时，给盒子加上相对定位relative属性，因为相对定位的盒子会压住普通盒子，位置没有设置偏移量的话就不会动

代码示例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>

解决方法二：添加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>

页面效果：

零OO

关注

13
点赞
踩
27

收藏

觉得还不错? 一键收藏
1
评论
css-边框重叠问题解决

相邻元素都加上边框后，会出现边框加粗的效果，但实际中我们需要边框不加粗的效果，代码示例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-wi
复制链接

扫一扫

专栏目录