公众号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;
}
[代码]
transform-origin: 0 0; 表示旋转轴，0 0 box 的左上角