css - weui 用偽元素生成border，源碼有點不理解

問題描述

.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的吧。

問題解答

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

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

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

不說話，看圖

為了實現0.5px邊框