博客

css

.border1px:after {
  content: ' ';
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 200%;
  height: 200%;
  transform: scale(.5);
  transform-origin: left top;
  pointer-events: none;
}
div { position: relative;width:100px;height:100px;}
div:after {border:1px solid #ccc;}

html

<div class="border1px"></div>

解释

• 将目标伪元素的尺寸 等于 目标的200%；再进行缩小一半；
  
  1px 的边框 transform: scale(.5) -> 0.5px
• 但是会有一个弊端： 伪元素因为position: absolute;处于最上层，点击的时候不会点到目标元素。
  
  解决： 将需要点击的元素position: relative; z-index: 2; 层叠高于:after