唯品秀博客
首页 > 前端开发 > HTML/CSS > web端如何制作小于1px边框线

web端如何制作小于1px边框线

2017年04月28日 唯品秀 1882次浏览

不知道你有没有注意,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,这时候不也可以了吗

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞( 3 ) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
3

谢谢你请我吃鸡腿*^_^*

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - web端如何制作小于1px边框线

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!

站点统计

  • 文章总数: 190 篇
  • 草稿数目: 2 篇
  • 分类数目: 13 个
  • 页面总数: 21 个
  • 评论总数: 873 条
  • 链接总数: 13 个
  • 标签总数: 371 个
  • 建站时间: 886 天
  • 注册用户: 690 人
  • 访问总量: 8673081 次
  • 最近更新: 2019年5月17日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线