css - weui 用伪元素生成border,源码有点不理解
巴扎黑
巴扎黑 2017-04-17 11:44:02
0
5
904
.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的吧。
巴扎黑
巴扎黑

reply all (5)
伊谢尔伦

为了适应高清屏、retina屏的1px border问题。用transform scale y一下就解决了。用伪元素的好处也在于不用多些无用的p标签。

    阿神

    如果只有宽度没有高度,这里给出高度,应该只是为了更好的显示出来~避免显示不出来的情况吧~~这里应该是为了1px的border宽,先给1px的高度,然后再给Y轴缩放回来~最后应该是一条线。

      洪涛

      为了解决retina屏幕的1px边框问题

        小葫芦

        不说话,看图

          刘奇

          为了实现0.5px边框

            Latest Downloads
            More>
            Web Effects
            Website Source Code
            Website Materials
            Front End Template
            About us Disclaimer Sitemap
            php.cn:Public welfare online PHP training,Help PHP learners grow quickly!