0.5px的实现方法

作者: 6f1e4e8dd1ef | 来源:发表于2017-02-28 11:02 被阅读325次

    在设计的强烈要求下,本宝宝在众里寻他千百度的地方找到了,实现了这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。

    以上就是我觉得最好的兼容方案

    其实还有*通过设置背景色的方式

    但是我觉得这种比不太实用,

    如果有需求的小伙伴欢迎联系我,或者在下方留言。

    相关文章

      网友评论

        本文标题:0.5px的实现方法

        本文链接:https://www.haomeiwen.com/subject/yobfsttx.html