在设计的强烈要求下,本宝宝在众里寻他千百度的地方找到了,实现了这0.5px的demo。
1.在设计评估不是很仔细,ui兼容不是很高的程度下,直接写。
这个是最快的方案,在ios下基本能实现0.5px,在安卓上会是1px,在一些低版本的安卓机上0.5px不会识别。
2.在要很高的兼容度情况下,可以有如下的方法。
2.1背景图大法
这个方法兼容性好,但是在做四边都是0.5px的时候有局限性。
2.2放大缩小法
首先css的样式的可以提出来,写个borderbottom,然后通过定位和伪类实现放大缩小。
代码如下:
这样就可以实现底部0.5px线条。
如果你要实现四边都是0.5px可以这样写
然后通过改变boder的值可以实现上线左右四边的0.5px。
以上就是我觉得最好的兼容方案
其实还有*通过设置背景色的方式
但是我觉得这种比不太实用,
如果有需求的小伙伴欢迎联系我,或者在下方留言。
网友评论