css 边线1像素问题

最新推荐文章于 2023-03-20 15:48:14 发布

lkycan

最新推荐文章于 2023-03-20 15:48:14 发布

阅读量4.6k

点赞数 1

分类专栏： app html5 css3 文章标签： css class 像素

本文链接：https://blog.csdn.net/lkycan/article/details/62235426

版权

html5 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

app

4 篇文章 0 订阅

订阅专栏

css3

4 篇文章 0 订阅

订阅专栏

先看效果：

代码思路：

1.新建4个div，加类
2.给类写基本样式
3.写鼠标移进来的效果

实践代码

<!-- 4个div，给div加类 -->
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

样式代码

<style type="text/css">
        .test {
            width: 223px;
            height: 258px;
            border: 1px solid #ccc;
            margin-top: 100px;
            float: left;
        }
        .test:hover {
            border: 1px solid #f40;
        }
</style>

实际效果：

当鼠标移动上去的效果

具体链接：
http://runjs.cn/detail/kipg09m3

解决1像素问题

样式中添加
margin-left: -1px;

当鼠标移进来时候出现新的问题

解决

在div：hover 中添加定位,占据位置
position: relative;

边框被覆盖问题链接

http://runjs.cn/detail/jrcqvnu5

完整代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .test {
            width: 223px;
            height: 258px;
            border: 1px solid #ccc;
            margin-top: 100px;
            float: left;

            margin-left: -1px;/*  添加的，解决1像素 */
        }
        .test:hover {
            border: 1px solid #f40;
            /*  解决某边框覆盖 */
            position: relative;
        }

    </style>
</head>
<body>
<div class="test">
</div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

</body>
</html>

问题：当当前容器有定位时候时候，该效果没用。

再度解决：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
/*      .test {
            width: 223px;
            height: 258px;
            border: 1px solid #ccc;
            margin-top: 100px;
            float: left;

            margin-left: -1px;
        }
        .test:hover {
            border: 1px solid #f40;

            position: relative;
        }
*/
        .test {
            width: 150px;
            height: 150px;
            border: 1px solid #ccc;
            margin-top: 100px;
            float: left; 
            margin-left: -1px;
            position: relative;
        }
        .test:hover {
            border: 1px solid #f40;
            z-index: 1;

        }
    </style>
</head>
<body>
<div class="test">
    <!-- <div class="">热卖</div> -->
</div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

</body>
</html>

具体链接效果：
http://runjs.cn/detail/ykartdjk

lkycan

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 边线1像素问题

先看效果：代码思路：1.新建4个div，加类2.给类写基本样式3.写鼠标移进来的效果实践代码<div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div>样式代码<style type="text/css">
复制链接

扫一扫