如何用CSS实现Instagram登录页那样的极细边框线条？

网上流传的“CSS无法实现小于1px边框、只能靠透明度模拟”的说法已经过时，Instagram页面的细线条完全可以用原生CSS实现，不需要依赖透明度模拟，以下是可直接复用的方案：

方案1：transform缩放实现任意粗细的锐利分隔线（Instagram「OR」分隔线的实现原理） #

核心逻辑：CSS中的px是逻辑像素，通过纵向缩放1px高的纯色块，可以渲染出远细于1px逻辑像素的实色线条，边缘清晰无发虚，不需要调整透明度。
直接复用「-OR-」分隔线代码：

/* 分隔线容器 */
.or-divider {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 16px 0;
}
/* 两侧线条 */
.or-divider::before,
.or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #dbdbdb; /* Instagram分隔线原色，不透明度为1 */
  transform: scaleY(0.5); /* 纵向压缩至原高度的50%，视觉上为0.5px粗细 */
  transform-origin: center;
}
/* 中间OR文字 */
.or-divider span {
  padding: 0 18px;
  font-size: 13px;
  font-weight: 600;
  color: #8e8e8e;
  text-transform: uppercase;
}

• 如果需要更细的线条，直接调小scaleY的数值即可，比如设置为0.3即可得到约0.3px粗的线条
• 不要用border属性做这个线条，border的渲染机制会导致缩放后边缘偏移，用height:1px+背景色的方式渲染边缘最锐利

方案2：0.5px原生边框（Instagram登录卡片外边框实现方式） #

现代浏览器全部支持小于1px的边框值设置，在2倍及以上像素密度的屏幕（绝大多数手机、新款电脑显示器）上，0.5px的边框会直接渲染为1个物理像素宽度的实色线条，不透明度为1，视觉上比1px边框细一半，完全匹配你观察到的Instagram卡片外边框效果。
代码示例：

.login-card {
  width: 350px;
  padding: 40px;
  border: 0.5px solid #dbdbdb;
  background: #fff;
}

• 兼容处理：针对像素比为1的老旧显示器，可以通过JS判断window.devicePixelRatio值，低像素比设备下回退为1px边框即可，不会出现渲染断裂问题

为什么调整opacity无法达到相同效果？ #

调整opacity本质是对完整1px粗的线条做半透明处理，线条的实际渲染宽度仍然是1逻辑像素，边缘会因为半透明和背景融合发虚，属于“变淡的粗线”；而上述两种方案渲染的是实色、边缘锐利的细线，和Instagram的视觉效果完全一致。

内容的提问来源于stack exchange，提问作者Axnyc