CSS3如何实现0.5边框

1.目标元素定位
2.给目标元素添加一个伪类设置定位，并添加绝对定位
3.给伪类设置1border，并放大宽高2倍
3.缩小0.5倍变回原大小，border包起来
具体代码如下：

.thinner-border {
    position: relative;
}

.thinner-border:before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    -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;
}

 

转载于:https://www.cnblogs.com/z-dl/p/8601560.html