css - weui 用伪元素生成border，源码有点不理解

Question

    
.weui_actionsheet_cell {
  position: relative;
  padding: 10px 0;
  text-align: center;
  font-size: 18px;
}
.weui_actionsheet_cell:before {
      content: " ";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 1px;
      border-top: 1px solid #D9D9D9;
      color: #D9D9D9;
      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
      -webkit-transform: scaleY(0.5);
              transform: scaleY(0.5);
}

我想知道为什么weui中，利用伪元素生成border,同时使用了border：1px和height:1px;,然后又在Y轴上缩放0.5倍。我觉得直接用border不久可以了，应该没有那个浏览器不支持border的吧。

Answer 1

為了適應高清螢幕、retina螢幕的1px border問題。用transform scale y一下就解決了。用偽元素的好處也在於不用多些無用的p標籤。

Answer 2

如果只有寬度沒有高度，這裡給出高度，應該只是為了更好的顯示出來~避免顯示不出來的情況吧~~這裡應該是為了1px的border寬，先給1px的高度，然後再給Y軸縮放回來~最後應該是一條線。

Answer 3

為了解決retina螢幕的1px邊框問題

Answer 4

不說話，看圖

Answer 5

為了實現0.5px邊框