CSS3实现0.5像素边框

2016-10-26阅读(1485)评论(0)

W3Cways.com 微信公众号

实现方法

1.设置目标元素作为定位参照

.border {
    position: relative;
}

2.给目标元素添加一个伪元素before或者after,并设置绝对定位

.border:before {
    content: "";
    position: absolute;
}

3.给伪元素添上1px的边框

border: 1px solid red;

4.设置伪元素的宽高为目标元素的2倍

width: 200%;
height: 200%;

5.缩小0.5倍(变回目标元素的大小)

transform-origin: 0 0;
transform: scale(0.5, 0.5);

6.再把border包进来

box-sizing: border-box;

简言之就是先放大再缩回来,border-box是关键,否则边框不会一起缩放

完整代码

.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(建议用手机端打开,看的更明显)

转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » CSS3实现0.5像素边框

分享到:更多 ()

Web前端开发-Web前端工程师--Web前端学习之路

联系我们