画一条0.5px的线

0.5px的线

/*直接用，浏览器会自动转为1px*/
border:0.5px solid black;

移动端

/*可以直接设置视口*/
/**
*initial-scale [0,10] 初始缩放比例
*maximum-scale [0,10] 最大缩放比例
*minimum-scale [0,10] 最小缩放比例
*user-scalable yes/no 是否允许手动缩放页面，默认yes
**/
"viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable">

通用 单条 border-image

/*设置一边为透明*/
/*添加border-image,设置为50%渐变，一半透明一半有颜色*/
.border{
	width:200px;
	height:200px;
	border-right:1px solid transparent;
	border-image:linear-gradient(
	to right,transparent 50%,blue 50%)0 100% 0 0;
}

transform:scale()

/*用一个伪元素画条1px的线缩放为一半。定位在父亲中*/
.transform{
    width:200px;
    height:200px;
    position:relative;
}
.transform::after{
    //伪元素内容为空要加content:""
    content:"";
    position:absolute;
    left:0px;
    botton:0px;
    width:100%;
    height:1px;
    backgroud-color:black;
    transform:scaleY(0.5);
}

四边

思想与单边transform:scale()差不多，先设置伪元素的宽高为父亲的200%，再设置1px边框然后缩放，但是四边同时缩放后会使边框的左上角起始点到父亲的中心，再使用transform-origin:0 0;重新设置一下起始点即可