html边框不占像素,CSS3实现0.5像素边框

实现方法

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]