前端页面细节处理好了才会显得精致。边框在网页中是常见的一种样式了。虽然不把它处理为0.5px看上去没毛病，但是想让你做的东西征服更多的人，这些细节处理是必须的。
今天主要说一下如何让边框显示0.5px的方法：
方法一：利用渐变
关于渐变可以看下面两篇文章做深入了解：
实现原理：
把元素的伪类高度设为1px,背景渐变，一半有颜色，一半透明。
线上案例： （没有改版的话）
代码如下：
边框0.5px实现方法 方案一：渐变
原理：高度1px,背景渐变，一半有颜色，一半透明。
方法二：利用缩放
原理：transform:scale()来达到压缩一半的目的。
线上案例：
代码如下：
边框0.5px实现方法 方案二：使用缩放
原理： 在Y轴方向上，压缩一半。
拓展：4条边框都需要
原理：也是利用transform:scale()，只不过这次缩放的是整个内容。
代码如下：
边框0.5px实现方法 拓展：四周全是0.5px的线条的话
这是实现一个盒子四周0.5px的做法， 如果加入border-radius圆角效果，会发现，有些手机会有圆角发虚的情况，不过影响不是很大。如果有两个盒子，上面一个盒子没有边框效果，下面盒子有边框效果，两个盒子一样宽，上下在一起的布局方式，你会发现，在手机上有时候会对不齐… 错开了0.5px，原因已经很明了了…还有那个z-index ，可以根据不同需求来调整使用，如果可以的话，不使用也是可以的。
其它文章推荐：