移动端边框1px处理

.border-1px,
.border-bottom-1px,
.border-top-1px,
.border-left-1px,
.border-right-1px {
	position: relative;
}


/*线条颜色 黑色*/

.border-1px::after,
.border-bottom-1px::after,
.border-top-1px::after,
.border-left-1px::after,
.border-right-1px::after {
	background-color: #ccc;
}


/*底边边框一像素*/

.border-bottom-1px::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	transform-origin: 0 0;
}


/*上边边框一像素*/

.border-top-1px::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1px;
	transform-origin: 0 0;
}


/*左边边框一像素*/

.border-left-1px::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 100%;
	transform-origin: 0 0;
}


/*右边边框1像素*/

.border-right-1px::after {
	content: "";
	box-sizing: border-box;
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
	height: 100%;
	transform-origin: 0 0;
}


/*边框一像素*/

.border-1px::after {
	content: "";
	box-sizing: border-box;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: 1px solid red;
}


/*设备像素比*/

@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
only screen and (min-resolution: 2dppx) {
	.border-bottom-1px::after,
	.border-top-1px::after {
		transform: scaleY(0.5);
	}
	.border-left-1px::after,
	.border-right-1px::after {
		transform: scaleX(0.5);
	}
	.border-1px::after {
		width: 200%;
		height: 200%;
		transform: scale(0.5);
		transform-origin: 0 0;
	}
}


/*设备像素比*/

@media only screen and (-webkit-min-device-pixel-ratio: 3.0),
only screen and (min-resolution: 3dppx) {
	.border-bottom-1px::after,
	.border-top-1px::after {
		transform: scaleY(0.333);
	}
	.border-left-1px::after,
	.border-right-1px::after {
		transform: scaleX(0.333);
	}
	.border-1px::after {
		width: 300%;
		height: 300%;
		transform: scale(0.333);
		transform-origin: 0 0;
	}
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值