置顶公众号1px问题精选热门

2021-08-15

335浏览

0评论

1px问题

retina 1px
利用box-shadow

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		.div{
			width: 400px;
			height: 400px;
			margin: 200px;
			margin-left: 500px ;
			box-shadow: inset 1px -1px 1px -1px #c8c7cc;		}
	</style>
</head>
<body>
	<div class="div">111</div>
</body>
</html>>

利用 div+伪类+transform scale
单个边框

.scale-1px{
				position: relative;
				border:none;
				width: 300px;
				height: 300px;
			}
			.scale-1px:after{
				content: '';
				position: absolute;
				bottom: 0;
				background: #000;
				width: 100%;
				height: 1px;
				-webkit-transform: scaleY(0.5);
				transform: scaleY(0.5);
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
			}

四个边框

.scale-all{
				position: relative;
				overflow: hidden;
				height: 400px;
				width: 400px;
				border: none;
			}
			.scale-all:after{
				content: '';
				width: 200%;
				height: 200%;
				position: absolute;
				transform-origin: 0 0;
				border: 1px solid #000;
				transform: scale(0.5);
				left: 0;
				top: 0;
			}