CSS实现移动端1px边框

intewl 发布于 CSS

实现原理:将原有尺寸高度宽度放大2(或3)倍,同时放大后设置边框,最终对整体进行缩小0.5(或0.333)倍,注意缩放的原点位置

.border-1px{
  position: relative;
  border:none;
}
实现代码:注意此代码针对2倍屏,如果是3倍屏可以放大3倍,在压缩。可以通过css3中的media来实现自动判断
.border-1px:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 10px;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}
最终实现代码解决2倍和3倍屏幕
@media (min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 2) {

    .border-1px:after {
        width: 200%;
        height: 200%;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

}  @media (min-device-pixel-ratio: 1.5),(-webkit-min-device-pixel-ratio: 1.5) {
    .border-1px:after {
        width: calc(100% / 0.7);
        height: calc(100% / 0.7);
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
    }
}  

最终可以通过类似方法生成一个border.css【别人写好的,原来类似】的样式,要用的时候直接引入。

里面定义好对应的名称:border,border-top,border-right,border-bottom,border-left,border-topbottom,border-rightleft,border-topleft,border-rightbottom,border-topright

下载地址:https://pan.baidu.com/s/1ky3Tq5n5sK_nJQOF0YWvrg

113浏览量 · 0评论 · 2019-11-05 10:33:35

全部评论  0

注册登录 进行评论

热门专题

更多专题