0.5px的边框线遇到的坑

奇怪的需求,要0.5px的边框线,有一个巨简单的方法

第一种:使用box-shadow的方法

如图
在这里插入图片描述

box-shadow: 0 0 0 0.5px black;

一句话搞定
兼容问题
这种方式在chrome可以,
但是firefox会出现如下情况(将其设置为0.6就会恢复正常,但是设置为0.4,box-shadow就全部消失了)
这里有个坑
就是在移动端(pc端暂时没有发现)有时候要么上面缺一点,要么下边缺一点,有些手机会有圆角发虚的情况,不知道什么原因,经过摸索,层级z-index设置高一点就ok了

第二种:使用伪类after

如图
0.5px的边框线遇到的坑_第1张图片



	
		
		
	
	
		

你可能感兴趣的:(0.5px的边框线遇到的坑)