CSS3如何实现0.5边框
1.目标元素定位
2.给目标元素添加一个伪类设置定位,并添加绝对定位
3.给伪类设置1border,并放大宽高2倍
3.缩小0.5倍变回原大小,border包起来
具体代码如下:
.thinner-border { position: relative; } .thinner-border:before { content: ''; position: absolute; 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; }