记录一些遇到的css问题1、如何实现0.5px 的边框？主要思路：通过background-image+linear-g

1、如何实现0.5px 的边框？

主要思路：通过background-image+linear-gradient设置背景渐变或者通过transfrom进行压缩

1、border+border-image+linear-gradient

border-image: linear-gradient( to bottom,transparent 50%,Green 50%) 0 0 100% 0

原理是设置背景渐变，一半有颜色，一半透明

2、伪元素（:before/:after)+background-image+linear-gradient background-image: linear-gradient(to bottom transparent 50%, blue 50%);

原理同上

3、定位+伪元素+transfrom缩放(scale)

    -webkit-transform: scaleY(.5);
    transform:scaleY(.5);

原理：在Y轴方向上，压缩一半。

    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(.5, .5);
    transform: scale(.5, .5);

四周都压缩