阅读 9701

1px边框解决方案总结

1px问题产生的原因

从移动端的角度说个具体的场景,以iphone6为例。

iphone6的屏幕宽度为375px,设计师做的视觉稿一般是750px,也就是2x,这个时候设计师在视觉稿上画了1px的边框,于是你就写了“border-width:1px”,so...1px边框问题产生了

对设计师来说它的1px是相对于750px的(物理像素),对你来说你的1px是相对于375px的(css像素)“实际上你应该是border-width:0.5px”。

具体方案

知道了问题产生的原因,辣么就好弄解决方案啦,O(∩_∩)O。

用小数写边框

媒体查询,加小数的写法

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}
复制代码
  • 优点:方便噻
  • 缺点: 安卓与低版本IOS不适用, 这个或许是未来的标准写法

tranform加伪类标签

利用伪类标签,更具父级定位,大小更具媒体查询缩放实现效果(注意别忘记了“transform-origin: left top;”

<span class="border-1px">1像素边框问题</span>
复制代码
// less
.border-1px{
  position: relative;
  &::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    border:1px solid red;
    color: red;
    height: 200%;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    pointer-events: none; /* 防止点击触发 */
    box-sizing: border-box;
    @media screen and (min-device-pixel-ratio:3),(-webkit-min-device-pixel-ratio:3){
      width: 300%;
      height: 300%;
      -webkit-transform: scale(0.33);
      transform: scale(0.33);
    }
  }
}
复制代码

需要注意input button是没有:before, :after伪元素的

  • 优点: 其实不止是圆角, 其他的边框也可以这样做出来
  • 缺点: 代码量也很大, 占据了伪元素, 容易引起冲突

box-shadow

利用阴影来模拟边框

.border-1px{
  box-shadow: 0px 0px 1px 0px red inset;
}
复制代码

2倍屏

3倍屏幕

border-image

弄出1px像素边框的实质是弄出0.5px这样的边框,所以我们可以利用类似于这样的图片,使得“border-image-slice”为2,那么实际上边框有一半是透明的,即可得到我们想要的“1px边框”

<div class="test">
    1像素边框
</div>
复制代码
.test{
    border: 1px solid transparent;
    border-image: url('./border-1px.png') 2 repeat;
}
复制代码

  • 修改颜色麻烦, 需要替换图片
  • 圆角需要特殊处理,并且边缘会模糊

background

这方法基本不用(麻烦O(∩_∩)0),不过还是记录一下

.background-image-1px {
background: url(../img/line.png) repeat-x left bottom;
-webkit-background-size: 100% 1px;
background-size: 100% 1px;
}
复制代码

总结

从兼容性和灵活性来考虑,个人还是推荐tranform加伪类标签的写法,节约时间成本。

参考资料

文章分类
前端