H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【CSS】移动端适配retina屏,如何实现1px边框圆角?

给个具体思路, 谢谢。

回答:

在vux的源码中发现的解决方案, 用伪元素实现感觉是最好得方法, 因为对元素直接scale依然会占据空间,影响后续布局。

.box {
  overflow: hidden;
  display: inline-block;
  width: 100px;
  height: 100px;
}

.box:before {
  z-index: -1;
  content:'';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background: #eee;
  transform-origin: 0 0; 
  transform: scale(.5,.5);
  border: 1px solid #000;
  border-radius: 10px;
}

回答:

2px缩放0.5倍

回答:

可以用css scale 属性

回答:

1px是有很多办法的,缩小0.5,伪类+transform我觉得是最方便的解决方案。
不需要动态的脚本去计算什么的。

.hairlines li{
    position: relative;
    border:none;
}
.hairlines li:after{
    content: '';
    position: absolute;
    left: 0;
    background: #000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
}

原理是把原先元素的 border 去掉,然后利用 :before 或者 :after 重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位

回答:

这个问题我也遇到过,你可以看看这篇文章,基本能解决问题
移动端1px细线解决方案总结

回答:

    border-radius: 5px;
    box-shadow: 0 0 1px 0 #a09e9e;
    
    亲测~~

本文地址:H5W3 » 【CSS】移动端适配retina屏,如何实现1px边框圆角?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址