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

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

2017-04-28 分类：HTML/CSS 作者：管理员 阅读（2765）

不知道你有没有注意，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前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站，愿景：成为宇宙中最具有代表性的前端博客，期待您的参与，主题源码 

最近更新

随机文章

热门标签

caniuse兼容性 阿里CDN CDN大全 犸良动画 百度统计 百度收录 关键词排名 经典css片段 时间戳格式化 全国黑企名单 武汉黑企名单 996.ICU火了 Js33个概念 vConsole DSBridge DOM元素进屏 Shareinstall Http接口测试 前端面试100问 Vue.js200问 Node.js上线 lodash.js 视频压缩 vue视图更新

精彩评论

友情链接

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

站点统计

  • 文章总数： 245 篇
  • 草稿数目： 0 篇
  • 分类数目： 15 个
  • 独立页面： 6 个
  • 评论总数： 888 条
  • 链接总数： 16 个
  • 标签总数： 438 个
  • 注册用户： 5930 人
  • 访问总量： 8894385 次
  • 最近更新： 2020年2月16日
服务热线：
 173xxxx7240

 QQ在线交流

点击这里给我发消息
点击这里给我发消息

 旺旺在线

点击这里给我发消息
点击这里给我发消息