点击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！
看一段demo的dom结构：
我准备这么搞：将div.border-inner设置成相对定位，里面的div.border-content元素设置成绝对定位，在div.border-inner上绑定一个伪元素来实现边框为0.5px的效果。
最终效果看起来就是这样的：
然后我来将after元素放大到原来的两倍，如下代码：
现在看起来就变成下面这样了：
最后加一个scale缩放功能来实现我们最终想要的样子（文章开头给出的效果）：
最后总结一下：
其实就是利用将after内容位置设置-50%，从而放大到原来的两倍，放大到两倍后，边框还是1px不变，然后，利用css3属性scale将其缩放到原来的一半，这个时候，边框会和内容一块缩放到原来的一半 ，所以就由原来的1px变成想要的0.5px。