• css写出0.5px边框(一)


    在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0.5px边框
    1.

    html部分

    <div class="border">测试0.5px边框</div>
    css部分
    .border{

      position: relative;

      color: #555;

       font-size: 14px;

      line-height: 41px;

      200px;

    }

    .border:after{

        height: 1px;

      content: '';

       100%;

      border-bottom: 1px solid #e8e8e8;

      position: absolute;

       bottom: -1px;

      right: 0;

       transform: scaleY(0.5);

       -webkit-transform: scaleY(0.5);

       z-index: 10;

    }

    用添加伪元素的方法添加下边框,再利用transform在y轴缩小1倍
    2.
    .border{

    200px;

    color: #555;

     font-size: 14px;

    line-height: 41px;

    border-bottom: 1px solid transparent !important;
    -webkit-border-image: url("../img/line-bottom.png") 2 0 stretch;
    border-image: url("../img/line-bottom.png") 2 0 stretch;
    -o-border-image: url("../img/line-bottom.png") 2 0 stretch;
    -moz-border-image: url("../img/line-bottom.png") 2 0 stretch;
    border- 0 0 1px;

    }

    line-bottom.png 是宽1px 高2px的小图片,1px透明,1px用border的颜色,这样也能写出1px边框,优点,如果用less或者sass,可以定义成公用的,引用方便,缺点:换颜色要换图片

  • 相关阅读:
    hadoop编程问题
    poj2760:数字三角形
    poj1201:Intervals
    差分约束
    poj1033:Defragment
    poj1089:Intervals
    poj2251:Dungeon Master
    天天向上的力量 III
    整数逆位运算
    星号三角形 I
  • 原文地址:https://www.cnblogs.com/manman04/p/6027701.html
Copyright © 2020-2023  润新知