解决移动端border 1像素变2像素问题

zzxBear

于 2018-04-20 12:51:47 发布

阅读量927

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zzxBear/article/details/80017223

本文介绍了一种使用CSS创建特殊边框效果的方法。通过绝对定位及transform属性，实现了底部细线和一个像素宽的动态边框效果。这种技巧适用于网页设计中需要独特视觉效果的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/rem.js"></script>
    <style>
        .border1:after {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0px;
            height: 1px;
            content: '';
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
            background-color: #000;
        }
        .border{
            width:1rem;
            height:.0075rem;
            background:red;
            margin-top:20px;
            position:absolute;
            left:0;
            top:20px;
        }
    </style>
</head>
<body>
<div  style="position:relative;">
    <div class="border1"></div>
    <div class="border"></div>
</div>

</body>

</html>