zoukankan      html  css  js  c++  java
  • 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,可以定义成公用的,引用方便,缺点:换颜色要换图片

  • 相关阅读:
    如何去重一个Oracle表
    配置Eclipse来开发Java 程序
    在windows上使用opera mini
    Oracle OLAP 介绍
    一个Batch作业调度系统构思
    how to Use Subversion with TortoiseSVN
    java official Design Pattern
    how to install ubuntu OS combined with Windows
    确保DWBI项目成功的几个关键点
    spinner 读取sqlite
  • 原文地址:https://www.cnblogs.com/manman04/p/6027701.html
Copyright © 2011-2022 走看看