CSS3实现0.5像素边框

2016-10-26阅读(9564)评论(0)牵着狗狗看MM

苏州实时公交查询

实现方法

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]

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

赞(1) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » CSS3实现0.5像素边框
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏