zoukankan      html  css  js  c++  java
  • 移动端1px细线解决方案--利用transform缩放方式

    移动端1px会显示为2px; 

    解决方式很多,这里介绍比较常用的一种方式--css的transform属性缩放

    1. 上边框 相当于 border-top

    <div class="bordert1px"></div>

    css

    /*top*/
    .bordert1px {
        position: relative;
    }
    .bordert1px:before {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        background-color: #d8d8d8;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.5); 
        transform: scaleY(0.5); // 纵向缩放
    }

    细线--直接缩放就好了

    <hr />

    css

    hr{background: #d8d8d8;width:1px;height:1rem;border:none;transform: scaleX(0.5);margin: 0;}

     如果使用vux的话,vux也提供了1px解决方案 https://doc.vux.li/zh-CN/css/1px.html

  • 相关阅读:
    蓝桥杯 算法训练 ALGO-118 连续正整数的和
    迭代器和生成器
    字符串格式化
    python 赋值 深浅拷贝
    web.py
    urlib2 标准代码
    left menu
    tab menu
    modal html
    emmet使用
  • 原文地址:https://www.cnblogs.com/leiting/p/9780129.html
Copyright © 2011-2022 走看看