zoukankan      html  css  js  c++  java
  • 细边框

    scaleY:https://cloud.tencent.com/developer/section/1072445

    一:使用缩放

    <!-- html 部分  -->
    <div class="bd-t"></div>
    
    /* 方式一css部分  */
    .bd-t{
        position:relative;
     }
     .bd-t:after{
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
         100%;
        height: 1px;
        background-color: #e0e0e0;
        /* 如果不用 background-color, 使用 border-top:1px solid #e0e0e0; */
        -webkit-transform: scaleY(.5);
        transform:scaleY(.5);
     }
    /* 方式二css部分  */
     .bd-all{
         position:relative;
     }
    .bd-all:after{
         content: " ";
         position: absolute;
         left: 0;
         top: 0;
         z-index:-1;
          200%;
         height:200%;
         border:1px solid #e0e0e0;
         -webkit-transform-origin: 0 0;
         transform-origin: 0 0;
         -webkit-transform: scale(.5, .5);
         transform: scale(.5, .5);
     }

    二、weui的做法

    .weui-cell:before{ 
        content: " "; 
        position: absolute; 
        left: 0; top: 0; 
        right: 0; 
        height: 1px; 
        border-top: 1px solid #D9D9D9; 
        color: #D9D9D9; 
        -webkit-transform-origin: 0 0; 
        transform-origin: 0 0; 
        -webkit-transform: scaleY(0.5); 
        transform: scaleY(0.5); 
    }

    三、不推荐

    <!-- html 部分  -->
    <div class="bd-t"></div>
    
    
    //css3部分
    .bd-t{
        position:relative;
     }
    .bd-t::after {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
         100%;
        height: 1px;
        background-image: linear-gradient(0deg, transparent 50%, #d9d9d9 50%);
     }
  • 相关阅读:
    SpringBoot配置文件(2)
    SpringBoot配置文件(1)
    java8新特性之stream流
    java8新特性之Lambda表达式
    zoj 1709 Oil Deposits
    zoj 2110 Tempter of the Bone
    poj 2823 Sliding Window
    fzu 1894 志愿者选拔
    hdoj 1754 I Hate It
    poj2404中国邮递员
  • 原文地址:https://www.cnblogs.com/zhizou/p/11354001.html
Copyright © 2011-2022 走看看