完美解决CSS移动端半像素边框

前言

最近在做公司的页面重构工作，因为这次重构有一些非常执着的设计同学，对于半像素极度喜爱，所以我们前端开发痛不欲生。经过一番挣扎，最后总结了一下半像素做边框的一些问题，和一个暂时我觉得比较完美的方式去解决的方案。

背景

主要设计稿中，需要我们实现一个这样的图标。

可以留意到这里的边线在750px设计稿下，是1个像素，所以按照很多文章的和教程说的，半像素边框的处理方式，一般使用after，然后高宽设置成2倍，之后缩小200%。

最终出来的效果会这样，在安卓机子和ios上都会出现不同程度的偏移，或者空白，如果你的外层标签设置了overflow等于hidden的话，那么更会出现部分边线会被隐藏的情况。

而且更有奇怪的现象是有时候在安卓机子上会出现一些标签左边留白，有一些右边，有些上边。在同一个页面中的不同标签都会有不同的表现。无法通过一些科学有规制的方式去解决，所以想了一些，修改了布局和样式去实现这类半像素的效果。

来自ios的效果

来自android的效果

在效果图洪，边框完全是1个像素，以及里面的问题也是完美的11px的效果，在安卓和ios中的完全一致。

实现思路

一般我们实现半像素边框都是使用after，然后放大2倍，然后边框设置为1px，然后缩小0.5倍，从而实现0.5像素的边框，但是因为after是使用绝对定位的问题，所以会出现边框无法百分百重合的问题，导致边框看上去出现偏移以及缩小后并非百分百还原。

通过思考和试验，我们发现问题主要有两个：

1. after缩小0.5倍，但是手机上渲染的效果并非真的0.5倍，总是出现大小有1-2个px的差距。
2. 定位问题并非百分百定位准确，会出现较小的偏移。

那么我们主要就是解决这两个问题。

1. 为了达到缩放边框和主体要完全一致，那么我们不用after实现标签边框，而是正常使用border来实现，但是是整个标签放大1倍，整体缩小0.5倍。这样就可以让border和标签本地完全重合，不会出现after缩小不能把百分百缩小到本地的高宽问题了。
2. 因为我们不使用after来实现半像素边框，所以不会存在定位问题。

但是会出现另外一个问题，就是因为我们使用transform: scale(0.5)，所以蓝色边框是浏览器渲染时所暂用的体积，所以会导致标签缩小的，但是位置还是2倍的位置，这个时候，我们就需要让标签定位，不影响布局，而且在底层做一个占位元素，占位元素的大小就是标签缩小后的大小。

整体的布局方式：

从而实现了完美的缩小。

.parent{
  position: relative;
}
.placeholder{
  height: 50px;
  width: 50px;
  opacity: 0;
}
.content{
  height: 100px;
  width: 100px;
  border: 1px solid red;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0.5) translateX(-50%) translateY(-50%);
}

如果还有更好的方案，欢迎指教！！！