实现方法
1.设置目标元素作为定位参照
1 2 3 | .border {
position:relative;
}
|
2.给目标元素添加一个伪元素before或者after，并设置绝对定位
1 2 3 4 | .border:before {
content:"";
position:absolute;
}
|
3.给伪元素添上1px的边框
4.设置伪元素的宽高为目标元素的2倍
1 2 | width:200%;
height:200%;
|
5.缩小0.5倍（变回目标元素的大小）
1 2 | transform-origin:00;
transform: scale(0.5,0.5);
|
6.再把border包进来
简言之就是先放大再缩回来，border-box是关键，否则边框不会一起缩放
完整代码
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .border {
position:relative;
}
.border:before {
content:"";
position:absolute;
width:200%;
height:200%;
border:1pxsolid#ff0000;
border-radius:5px;
-webkit-transform-origin:00;
-moz-transform-origin:00;
-ms-transform-origin:00;
-o-transform-origin:00;
transform-origin:00;
-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;
}
|
点击查看Demo(建议用手机端打开，看的更明显)
