zoukankan      html  css  js  c++  java
  • ios实现0.5px的几种方法,安卓设备也实用,安卓和ios实现细线边框

    
    

    1、通过伪元素的高度实现0.5px

    .hairlines .mine-pic:before{
    content:'';
    200%;
    position: absolute;
    top:0;
    left: 0; 
    right:0;
    -webkit-transform: scale(0.5); 
    transform: scale(0.5);
    -webkit-transform-origin:0 0;
    transform-origin: 0 0;
    height:1px;
    background-color:#ccc;
    }

    2、通过阴影实现ios o.5px ,有一些设备会有阴影

    #button{ 
    background-image:linear-gradient(180deg, #ccc, #ccc 50%, transparent 50%),
    linear-gradient(270deg, #ccc, #ccc 50%, transparent 50%),
    linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%),
    linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%);
    background-size: 100% 1px,0px 100% ,100% 1px, 0px 100%;
    background-repeat: no-repeat;
    background-position: top, right top, bottom, left top;
    padding: 10px;
    margin:20px 0;
    overflow:hidden;
    }

     3、用图片做背景实现细腻1px:安卓,ios均实用。

    .deal_count {
        padding: 23px
        background-color: #fff;
        background-image: url(../images/border-bottom.gif); /**高度2px的图,宽度随意**/
        background-repeat: repeat-x;
        background-position: bottom;
        background-size: auto 1px;

    通过以上几种方法 配合使用,可以基本满足所需。

  • 相关阅读:
    TCP /IP协议的理解
    Linux 文件大小跟踪命令
    关于3D旋转的本质
    Unity旋转
    QT解析XML(机械拆装)
    红黑树总结
    EXCEPTIONS
    算数运算符注意事项
    java中常用的转义字符
    常量和数据类型
  • 原文地址:https://www.cnblogs.com/weixin186/p/5050664.html
Copyright © 2011-2022 走看看