消息关闭
    暂无新消息!

给个具体思路, 谢谢。


5个回答

︿ 0

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 绝对定位

︿ 0

在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;
}