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

这篇关于css - 移动端适配retina屏，如何实现1px边框圆角？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！