使用transform描繪1px邊框

<div class="bruce flex-ct-y">
	<div class="onepx-border normal">1px</div>
	<div class="onepx-border thin">0.5px</div>
</div>
.onepx-border {
	margin-top: 10px;
	width: 400px;
	height: 80px;
	cursor: pointer;
	line-height: 80px;
	text-align: center;
	font-weight: bold;
	font-size: 50px;
	color: red;
}
	.onepx-border::first-child {
		margin-top: 0;
	}
}
.normal {
	border: 1px solid red;
}
.thin {
	position: relative;
}
	.thin::after {
		position: absolute;
		left: 0;
		top: 0;
		border: 1px solid red;
		width: 200%;
		height: 200%;
		content: "";
		transform: scale(.5);
		transform-origin: left top;
	}
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章