实现方法
1.设置目标元素作为定位参照
[css].border {
position: relative;
}
[/css]
2.给目标元素添加一个伪元素before或者after,并设置绝对定位
[css].border:before {
content: "";
position: absolute;
}
[/css]
3.给伪元素添上1px的边框
[css]border: 1px solid red;
[/css]
4.设置伪元素的宽高为目标元素的2倍
[css]
width: 200%;
height: 200%;
[/css]
5.缩小0.5倍(变回目标元素的大小)
[css]transform-origin: 0 0;
transform: scale(0.5, 0.5);
[/css]
6.再把border包进来
[css]box-sizing: border-box;
[/css]
简言之就是先放大再缩回来,border-box是关键,否则边框不会一起缩放
完整代码
[css].border {
position: relative;
}
.border:before {
content: "";/* 注意这里为双引号 */
position: absolute;
width: 200%;
height: 200%;
border: 1px solid #ff0000;
border-radius:5px;/* 也可以设置圆角 */
-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;
}
[/css]