细边框

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;
    width: 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;
     width: 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;
    width: 100%;
    height: 1px;
    background-image: linear-gradient(0deg, transparent 50%, #d9d9d9 50%);
 }

 

转载于:https://www.cnblogs.com/zhizou/p/11354001.html