實現方法
1.設置目標元素作為定位參照
|
1
2
3
|
.border {
position
:
relative
;
}
|
2.給目標元素添加一個偽元素before或者after，並設置絕對定位
|
1
2
3
4
|
.
border
:before {
content
:
""
;
position
:
absolute
;
}
|
3.給偽元素添上1px的邊框
|
1
|
border
:
1px
solid
red
;
|
4.設置偽元素的寬高為目標元素的2倍
|
1
2
|
width
:
200%
;
height
:
200%
;
|
5.縮小0.5倍（變回目標元素的大小）
|
1
2
|
transform-origin:
0
0
;
transform: scale(
0.5
,
0.5
);
|
6.再把border包進來
|
1
|
box-sizing: border-box;
|
簡言之就是先放大再縮回來，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
:
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;
}
|