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;
}

 



posted @ 2018-03-19 13:47  Z-DL  阅读(207)  评论(0编辑  收藏  举报