移动端 1px边框
Posted cdj61
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端 1px边框相关的知识,希望对你有一定的参考价值。
底部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边框的主要内容,如果未能解决你的问题,请参考以下文章