目的：

• 物理畫素點指的是螢幕顯示的最小顆粒，是物理真實存在的，這是廠商在出廠時就設定好的，比如蘋果6/7/8是750*1334
• 我們開發的時候1px不是一定等於一個物理畫素的
• PC端頁面，1個px等於一個1個物理畫素，但是移動端就不盡相同
• 一個px的能顯示的物理畫素點的個數，稱為物理畫素比或螢幕畫素比

那麼我們的問題來了，怎麼在高清屏上畫一條0.5px的邊呢？0.5px相當於高清屏物理畫素的1px

方式

1.直接畫
2.使用線性漸變
3.縮放
4.陰影
5.修改

對比圖：

直接畫：

.box1 {
height:1px;
width: 100px;
background-color: #ccc;
}

.box2 {
height: 0.5px;
width: 100px;
background-color: #ccc;
}
 

<p>直接畫的</p>
<p>1px</p>
<div id="" class="box1"></div>
<p>0.5px</p>
<div class="box2"></div>

使用線性漸變linear-gradient

.box4 {
  height: 1px;
  width: 100px;
  background:linear-gradient(0deg,#fff,#ccc);
}

linear-gradient(0deg,#fff,#ccc);
漸變的角度從下往上，從白色漸變到黑色；
而且是線性的，在高清屏上，1px的邏輯畫素代表物理裝置的到px，由於是線性漸變，所以第一個1px只能是#fff，而剩下的那個畫素只能是#ccc,這樣就達到了畫一半的目的

使用縮放：

.box3 {
  height: 1px;
  width: 100px;
  background-color: #ccc;
  transform: scaleY(0.5);
  transform-origin: 50% 100%
}	

當縮放完後，發現，線變虛了

預設縮放是從中點開始的，所以要改變縮放的位置
transform-origin: 50% 100%

使用陰影box-shadow

.box5 {
  height: 1px;
  width: 100px;
  background: none;
  box-shadow: 0px 0.5px 0px #ccc;
 }