一般設計圖是使用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 徹底明白》）
產生的效果如下

缺點是改邊框顏色就需要改變圖片，比較麻煩。