唯品秀前端博客
立即登录 马上注册

不知道你有没有注意,1px宽度在移动端显得有些碍眼,在类似QQ列表等APP客户端好多边框线特别纤细,应该是不足1px的,虽然不知道那些客户端是如何做到的,但是我们在移动端网站其实也可以做到这种效果

利用css3 transform

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>制作小于1px边框线</title>
    <style>
        .scale {
            position: relative;
        }

        .scale:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            border-bottom: 1px solid #F50206;
            transform: scaleY(.3);/*将边框线沿着垂直方向缩小到0.3倍*/
            transform-origin: 0 bottom;/*因为是下边框线,所以沿着底部靠齐*/
        }

        #div1 {
            width: 100%;
            height: 50px;
            background: #26A04B;
        }
    </style>
</head>

<body>
    <div id="div1" class="scale"></div>
</body>

</html>

当然,这是在做一根边框下情况下通过伪类进行定位制作,那么你可能想如果我希望四边都要该怎么办,难道去定义四个标签去进行一个个定位。其实不必如此,如果是四周都需要的话,你完全可以将区域内容设置2倍大小去做,然后将整个区域缩放成0.5,边框线固定死为1px,这时候不也可以了吗

本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(3) 打赏
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

1 条评论关于"你能想象到前端如何制作小于1px边框线吗?"

表情

最新评论

  1. 白日梦想家诶
    Windows 10 Firefox 56.0

    这个不错顶一下

  2. 暂无留言哦~~