移动端1px边框实现方案

最新推荐文章于 2024-07-05 17:35:21 发布

visitor009

最新推荐文章于 2024-07-05 17:35:21 发布

阅读量310

点赞数

分类专栏： Web移动端

本文链接：https://blog.csdn.net/visitor009/article/details/107347377

版权

Web移动端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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