zoukankan      html  css  js  c++  java
  • 移动端0.5px的实现

    方案一:

    .left-list > ul li {
    position:relative;
    height: 1.22rem;
    line-height: 1.22rem;
    font-size: 0.24rem;
    color: #555555;
    }
    .left-list > ul li:before {
    content: '';
    position: absolute;
    left:0;
    200%;
    height: 200%;
    transform-origin: 0 0;
    transform: scale(0.5);
    border-style: solid;
    border- 1px 0 0 0;
    border-color: #e5e5e5;
    box-sizing: border-box;
    }

    方案二:

    nav ul li{
    position:relative;
    float: left;
    color: #9a9a9a;
    font-size: 0.24rem;
    text-align: center;
    padding: 3px 5px;
    border-radius: 0.03rem;
    margin-left: 0.21rem;
    margin-bottom: 0.18rem;
    }
    nav ul li:before {
    content: '';
    position: absolute;
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    border-style: solid;
    border- 1px;
    border-color: #9a9a9a;
    -webkit-border-radius: 0.12rem;
    border-radius: 0.12rem;
    }

    方案三:

    ul{
    position: relative;
    }
    li{
     height: 60px;
     line-height: 60px;
     padding-left: 10px;
    position: relative;
    font-size: 20px;
    width : 20%;
    height: 20%;
    }
    li:after{
    content: "";
    display: block;
    position: absolute;
    left: -50%;
    200%;
    height: 1px;
    background: red;
    -webkit-transform:scale(0.5);
    }

     0.5px 存在很多坑。只显示下边框的时候会存在断点。即某个li元素边款显示不出来。

  • 相关阅读:
    机器学习中的规则化
    TF-IDF 文本相似度分析
    数据分析实践:遇到的问题及感想
    记录工作中用到的linux命令
    回归:预测数值型数据
    FP
    Application
    Mac安装sqlite3
    查看百度CUID方法
    leetcode算法题整理
  • 原文地址:https://www.cnblogs.com/lcyhappy/p/5859624.html
Copyright © 2011-2022 走看看