CSS重叠解决边框相邻变粗问题

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

当我们为相邻盒子设置边框的时候会发现边框相邻导致边框变粗CSS重叠解决边框相邻变粗问题_第1张图片

解决方法:
对浮动的盒子设置margin-left:-1px-1px像素为边框大小);
使边框向左移,导致边框重叠

效果如下:
CSS重叠解决边框相邻变粗问题_第2张图片
代码:

<style>
            ul li {
                float: left;
                list-style: none;
                width: 150px;
                height: 200px;
                border: 1px solid red;
                margin-left: -1px;
            }
</style>
<body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
</body>

你可能感兴趣的:(前端基础,css,html,css3,html5,前端)