0.5像素实践应用
之前做 移动端都懒得去实现0.5像素。一直都知道原理是 css3的偏移(结合伪类元素)!但实际应用没那么简单
1.单纯的 底部边框(没多复杂的 直接上例子一看就会)
li::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 10px;
width: 100%;
border-bottom: 1px solid red;
-webkit-transform-origin: left bottom;//
transform: scaleY(0.5);//
-webkit-transform: scaleY(0.5);//
2.输入框
.border3:before{
content: '';
position: absolute;
width: 200%;//这是注意的地方
height: 200%;
border: 1px solid red;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-o-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;// 又得时候 这样写 会使得input被挡住。无法输入,需要将input 做定位!提高z-index
}
实现思路:
1、设定目标元素的参考位置
2、给目标元素添加一个伪元素before或者after,并设置绝对定位
3、给伪元素添加1px的边框
4、用box-sizing: border-box 属性把边框都包进宽和高里面
5、宽和高设置为 200%
6、整个盒子模型缩小为0.5
7、调整盒子模型的位置,以左上角为基准 transform-origin: 0 0;