border.css（移动端1像素问题解决）

最新推荐文章于 2023-02-17 20:30:22 发布

有你卟孤丹

最新推荐文章于 2023-02-17 20:30:22 发布

阅读量824

点赞数 1

分类专栏： web移动端文章标签： vue.js

本文链接：https://blog.csdn.net/qq_44196374/article/details/104458590

版权

本文探讨了移动端设备中物理像素与逻辑像素比例差异导致的1像素边框显示问题，并介绍了如何使用border.css来实现精确的1像素边框效果。通过引入border.css样式代码，开发者可以有效解决在不同设备上出现的多像素边框问题。

摘要由CSDN通过智能技术生成

发现：对于不同的移动设备，其物理像素与逻辑像素间存在不同的比例关系。

作用：可以解决1像素边框解决多像素边框问题

下面是border.css样式代码分享

@charset "utf-8";
.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-rightleft,
.border-topleft,
.border-rightbottom,
.border-topright,
.border-bottomleft {
   
  position: relative;
}

.border::before,
.border-top::before,
.border-right::before,
.border-bottom::before,
.border-left::before,
.border-topbottom::before,
.border-topbottom::after,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::before,
.border-topleft::after,
.border-rightbottom::before,
.border-rightbottom::after,
.border-topright::before,
.border-topright::after,
.border-bottomleft::before,
.border-bottomleft::after {
   
  content: "\0020";
  overflow: hidden;
  position: absolute;
}

/* border
 * 因，边框是由伪元素区域遮盖在父级
 * 故，子级若有交互，需要对子级设置
 * 定位 及 z轴
 */
.border::before {
   
  box-sizing: border-box;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 1px solid #eaeaea;
  transform-origin: 0 0;
}

.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topr