移动端半像素边框实现思路
要实现半像素边框,可能我们首先想到的是 border-width:0.5px ,但并不是所有手机浏览器都能识别border-width:0.5px ;
注:关于0.5px 并不是说 css 的 border-width 值不支持0.5px,而是显示状态受屏幕分辨率的影响。ios8和winphone 8的设备对高清屏做了特殊处理,支持显示border-width:0.5px,android 几乎所有的机型不支持显示0.5px的边框。
储备知识点:需要先了解devicePixelRatio和border-image
实现方法①: transform: scale(0.5) 实现
补充:scale和zoom区别
- zoom的缩放是相对于左上角的;而scale默认是居中缩放,可以通过
transform-origin
修改基准点 - zoom的缩放改变了元素占据的空间大小(先布局后变换的,变换不会对布局产生影响);而scale的缩放占据的原始尺寸不变,页面布局不会发生变化(它先缩放,后计算布局)
- 对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制;而scale就是纯粹的对图形进行比例控制,文字50%原来尺寸
- 兼容性问题。firefox下不支持zoom;scale针对IE9+
1.用height:1px
的div,然后根据媒体查询设置transform:scaleY(0.5);
1 2 3 4 5 6 7 8 9 | .box{ height : 1px ; background : #000 ; transform: scaleY( 0.5 ); -webkit-transform: scaleY( 0.5 ); transform-origin: 0 0 ; -webkit-transform-origin: 0 0 ; overflow : hidden ; } |
2.用::after和::befor,设置border-bottom:1px solid #000,然后在缩放-webkit-transform: scaleY(0.5);
1 2 3 4 5 6 7 8 | .box::after{ content : '' ; width : 100% ; display : inline- block ; border-bottom : 1px solid #000 ; transform: scaleY( 0.5 ); -webkit-transform: scaleY( 0.5 ); } |
3.用::after
设置border:1px solid #000; width:200%; height:200%
,然后再缩放scaleY(0.5);
优点可以实现圆角
,比较好的用法,缺点是点击涉及层级问题。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | @mixin border_half($ color : $borderColor, $radius: 0 ){ position : relative ; &:after{ content : '' ; width : 200% ; height : 200% ; position : absolute ; top : 0 ; left : 0 ; box-sizing: border-box; border : 1px solid $color; border-radius: $radius; -webkit-transform: scale( 0.5 , 0.5 ); transform: scale( 0.5 , 0.5 ); transform-origin: top left ; -webkit-transform-origin: top left ; } } |
实现方法②: border-image 图片
缺定:需要定制图片颜色,不能实现圆角,不灵活,但是不涉及层级的问题。
1 2 3 4 5 6 7 8 9 | /*参考文章:https://github.com/AlloyTeam/Mars/blob/master/solutions/border-1px.md */ .box{ border-width : 1px ; border-style : solid ; width : 200px ; height : 100px ; /* -webkit-border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAQMAAAC3obSmAAAABlBMVEUAAADu7u6BVFV4AAAAAXRSTlMAQObYZgAAAA5JREFUCNdj+MHQAYY/ABGyA4nEIg1TAAAAAElFTkSuQmCC) 2 stretch; */ -webkit-border-image: url (data:image/png;base 64 ,iVBORw 0 KGgoAAAANSUhEUgAAAAUAAAAFAQMAAAHApoQwAAAABlBMVEX/// 8 mJiZ 40 e/ 1 AAAAAXRSTlMAQObYZgAAABlJREFUCB 1 jbmBuYD 4 AxA 7 MC 4 A 0 CHcwuwAARL 4 GLlsABegAAAAASUVORK 5 CYII=) 2 stretch; } |
源码地址:https://github.com/zuobaiquan/css3/tree/master/半像素边框实现思路
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】博客园携手 AI 驱动开发工具商 Chat2DB 推出联合终身会员
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步