标签：bd top transform 边框 1px scaleY position

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%);
 }

标签：bd,top,transform,边框,1px,scaleY,position
来源： https://www.cnblogs.com/zhizou/p/11354001.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。