css3 - 移动端 border:1px

问题描述

问 题

1、问题描述

如何在移动端实现border:1px的功能。

2、自己的思考

如果只是border-top, border-bottom, border-left, bottom-right。我一般会用以下代码：

    @mixin setTopLine($color: #C7C7C7) {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid $color;
    color: $color;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
    }

但是如果想四条边同时设为1px，那应该如何写呢？

解决方案

用:after或者:before

:after{
content: ''; 
position: absolute;
top: 0; 
left: 0; 
border: 1px solid #000; 
-webkit-box-sizing: border-box;
 box-sizing: border-box;
 width: 200%; 
height: 200%; 
-webkit-transform: scale(0.5); 
transform: scale(0.5); 
-webkit-transform-origin: left top;
 transform-origin: left top;
}

这篇关于css3 - 移动端 border:1px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！