css在制作边框0.5px的时候，苹果手机下的浏览器能正常显示，而安卓下几乎所有的浏览器都会把0.5识别为0，即无边框状态。那么我们如何制作0.5px的边框呢？

一、css3实现0.5px的边框的原理：利用缩放

给需要加边框的元素插入一个伪类，伪类采用绝对定位，然后对伪类添加1px边框，最后进行0.5倍缩放。

transform的缩放和旋转默认都是按照元素的中心点来操作的，我们使用transform-origin: 0 0 来修改位置 

<style>
.box{position: relative;width:100px;height:50px;}
.box::after{
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  bottom: 0;
  border-bottom: 1px solid red;
  transform-origin: 0 0;
  transform: scale(.5,.5);
  box-sizing: border-box
}
</style>

注意:CSS3有兼容性问题,使用时需要加私有前缀

二、css3实现0.5px的边框的原理：利用渐变

把元素的伪类高度设为1px,背景渐变，一半有颜色，一半透明。 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框0.5px实现方法</title>
<style type="text/css">
.container{width: 500px;margin: 0px auto;}
.border-gradient{position:relative;padding: 10px;}
.border-gradient:after {content: " ";position: absolute;left: 0;bottom: 0;width: 100%;height: 1px;background-image: linear-gradient(0deg, #f00 50%, transparent 50%);}
</style>
</head>
<body>
<div class="container">
<h3>方案一：渐变</h3>
<div class="border-gradient">
原理：高度1px,背景渐变，一半有颜色，一半透明。
</div>
</div>
</body>
</html>