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

全部回复(5)
伊谢尔伦

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

阿神

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

PHP中文网

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

高洛峰

不说话,看图

怪我咯

为了实现0.5px边框

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号