如何创建0.5px的border

一般设计图是使用iphone6的尺寸进行绘制的（750px），也就是普通的两倍关系，因此设计图中的1px,对应的css就是0.5px，但是如何直接写0.5px，大部分浏览器会将其作为1px进行解析。但是可以使用以下几种方式进行处理

1、使用transform：scale(0.5,0.5)的方式

借助transform:scale(0.5,0.5)将边框进行缩放一半，自然就形成了0.5px的边框

        .single-border{
			position:relative;
			width:200px;
			height:200px;
		}
		.single-border::after{
			content:'';
			position:absolute;
			width:200%;
			height:200%;
			border:1px solid black;
			box-sizing: border-box;
			transform: scale(0.5,0.5);
			transform-origin: 0 0;
		}

2、使用meta标签

使用viewport标签，将其中content的width定义为设计图的尺寸宽度，然后在直接使用
1px即可（不同屏幕宽度会自动进行缩放）

<meta name="viewport" content="width=750, user-scalable=no">

3、使用box-shadow的方法

可以通过这样设定

box-shadow: 0 0 0 0.5px black;

产生的效果如下

这种方式在chrome可以，
但是firefox会出现如下情况（将其设置为0.6就会恢复正常，但是设置为0.4,box-shadow就全部消失了）

4、使用border-image的方式

创建一个5*5的图片，周围是我们需要设定的边框颜色

代码

		.test-border{
			border:1px solid transparent;
			border-image:url(border1.png) 2 repeat;
			border-image-width:1px;
		}

（border-image的相关知识可以参考这篇文章《CSS3 border-image 彻底明白》）
产生的效果如下

缺点是改边框颜色就需要改变图片，比较麻烦。