要实现半像素边框,可能我们首先想到的是 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);
.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);
.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);
优点可以实现圆角
,比较好的用法,缺点是点击涉及层级问题。
@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 图片
缺定:需要定制图片颜色,不能实现圆角,不灵活,但是不涉及层级的问题。
/*参考文章: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;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAQMAAAHApoQwAAAABlBMVEX///8mJiZ40e/1AAAAAXRSTlMAQObYZgAAABlJREFUCB1jbmBuYD4AxA7MC4A0CHcwuwAARL4GLlsABegAAAAASUVORK5CYII=) 2 stretch;
}
源码地址:https://github.com/zuobaiquan/css3/tree/master/半像素边框实现思路