首页 > 开发 > CSS > 正文

weui 用伪元素生成border,源码有点不理解

2017-09-12 09:36:28  来源: 网友分享
    .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一下就解决了。用伪元素的好处也在于不用多些无用的div标签。