CSS3实现0.5像素边框

实现方法

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

点击查看Demo(建议用手机端打开，看的更明显)

转载于:https://www.cnblogs.com/shaozhu520/p/11314877.html