码迷,mamicode.com
首页 > 移动开发 > 详细

移动端 1px边框

时间:2020-07-02 16:03:01      阅读:55      评论:0      收藏:0      [点我收藏+]

标签:cal   ash   边框   transform   idt   info   dash   absolute   after   

底部1px虚线边框:

.line {
    width: 100%;
    height: 100px;
    position:relative;
    
    border-left:1px dashed red;
    border-right:1px dashed red;
}
.line:after {
    content:‘‘;
    position: absolute;
    width:100%;
    bottom:0;
    right:0;
    border-top: 1px dashed red;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

顶部1px实线边框

.borderBottom {
    position: relative;
    height: 100px;
    width: 100%;
    border-left: 1px solid green;
    border-right: 1px solid green;
}
.borderBottom:after {
    content: ‘‘;
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    background: red;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

技术图片

 

移动端 1px边框

标签:cal   ash   边框   transform   idt   info   dash   absolute   after   

原文地址:https://www.cnblogs.com/cdj61/p/12923794.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!