css实现1px 像素线条基础知识入门解决移动端1px线条的显示方式_px指南攻略

使用CSS 绘制出 1px 的边框,在移动端上渲染的效果会出现不同,部分手机发现1px 线条变胖了,这篇文章整理2种方式实现1px 像素线条。1、利用box-shadow + transform
span.onepixel{width: 300px;position: relative;top:50px;
}
span.onepixel::a

css实现1px 像素线条基础知识入门解决移动端1px线条的显示方式

使用CSS 绘制出 1px 的边框,在移动端上渲染的效果会出现不同,部分手机发现1px 线条变胖了,这篇文章整理2种方式实现1px 像素线条。

css实现1px 像素线条基础知识入门解决移动端1px线条的显示方式_px指南攻略

1、利用box-shadow + transform 

<style>
span.onepixel{
    width: 300px;position: relative;top:50px;
}
span.onepixel::after {
    content: '';
    width: 300px;
    position: absolute;
    bottom: 0; 
    left: 0;
    box-shadow: 0 0 0 1px #666;
    transform-origin: 0 bottom;
    transform: scaleY(.5) translateZ(0);
}
@media (min-resolution: 2dppx) {
    span.onepixel.shadow::after {
      box-shadow: 0 0 0 .5px #666;
    }
 }
@media (min-resolution: 3dppx) {
    span.onepixel.shadow::after {
      box-shadow: 0 0 0 .333333px #666;
    }
}
</style>
<span class="onepixel shadow"></span>

2、利用border + 伪元素 + transform

<style>
  span.onepixel {
    display: block;
    width: 300px;
    position: relative;
  }
  span.onepixel::before, span.onepixel::after {
    content: "";
    display: block;
    position: absolute;
    transform-origin: 0 0;
  }
  span.onepixel.top::before {
    width: 100%;
    top: 0; left: 0;
    border-top: 1px solid #666;
    transform-origin: 0 top;
  }
  @media (min-resolution: 2dppx) {
    span.onepixel.top::before {
      width: 200%;
      transform: scale(.5) translateZ(0);
    }
  }
  @media (min-resolution: 3dppx) {
    span.onepixel.top::before {
      width: 300%;
      transform: scale(.333333) translateZ(0);
    }
  }
</style>

<span class="onepixel top"></span>
海计划公众号
(0)
上一篇 2020/04/05 01:51
下一篇 2020/04/05 01:51

您可能感兴趣的内容