問題描述

.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,同時(shí)使用了border：1px和height:1px;,然后又在Y軸上縮放0.5倍。我覺得直接用border不久可以了，應(yīng)該沒有那個(gè)瀏覽器不支持border的吧。

問題解答

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

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

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

不說(shuō)話，看圖

為了實(shí)現(xiàn)0.5px邊框