当前位置: 首頁 > HTML&CSS > css3实现半像素的边框

css3实现半像素的边框

如何用css来实现半像素的边框?

这是阿里的电话面试题。

当然,这或许是一个很奇怪的需求,半像素的边框一般并不一定会注意到,

但是合理的需求是需求,不合理的需求,就是需要 (= =)b。

以下是css代码

    .border1{border:1px solid #000;width: 200px;height: 100px;}
    .border2{border:0.5px solid #000;width: 200px;height: 100px;}
    .border3{border:1px solid #000;width: 200px;height: 100px;transform: scale(0.5);transform-origin: 0 0;}
    .border4{border:1px solid #000;width: 200px;height: 100px;transform: scale(0.25);transform-origin: 0 0;}
    .border5{width: 200px;height: 100px;position: relative;}
    .border5:after{border:1px solid #000;content: '';position: absolute;width: 200%;height: 200%;transform: scale(0.5);transform-origin: 0 0;left: 0;top:0;box-sizing: border-box;}
    .border6{width: 200px;height: 100px;position: relative;}
    .border6:after{border:1px solid #000;content: '';position: absolute;width: 400%;height: 400%;transform: scale(0.25);transform-origin: 0 0;left: 0;top:0;box-sizing: border-box;}
    .border7{width: 200px;height: 100px;position: relative;}
    .border7:after{border:1px solid #000;content: '';position: absolute;width: 200%;height: 200%;transform: scale(0.5);transform-origin: 0 0;left: 0;top:0;}

border1是默认的一个1px边框容器对比用

border1


border2是一个设置border:0.5px solid #000;的容器,PC端会被解析成1px,移动端很有趣边框直接不见,应该是判定border:0.5px solid #000是错误的所以没解析

border2


border3,border4为scale为0.5、0.25的效果,PC端的视觉效果很像边框颜色变浅了,移动端可以看到边框确实是比默认的1px细

border3


border4

border5通过给容器设置伪类(before or after),然后宽高为容器的2倍,设置1px的边框后,再通过transform:scale(0.5),缩放回来实现半像素边框。

border6,宽高为容器的4倍,缩放为0.25,所以理论上这是0.25像素的边框,PC端上不明显,同样是颜色变淡,肉眼较难识别,移动端比较明显。

border7和border5的区别为,少了一个

box-sizing: border-box;

这样做的区别在于border所占用的空间是否在容器空间内,如果没有设置这个值,border7会宽2个像素也就是200+2(边框1px*2)。

box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。

content-box,border和padding不计算入width之内

padding-box,padding计算入width内

border-box,border和padding计算入width之内,其实就是怪异模式

border5
border7
border6


评论 ( 0 )

网友留言