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;

 

转载于:https://www.cnblogs.com/lovelgx/articles/6489554.html