0.5px的实现方法

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

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

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

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

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

IT文库 » 0.5px的实现方法
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址