CSS 视觉 - 细而明显的边框

2019-07-27

描述

给一个元素设置一个宽度等于 1 个原始设备像素的边框，要让他看起来细的非常明显。

HTML

<div class="hairline-border">text</div>

CSS

.hairline-border {
  box-shadow: 0 0 0 1px;
}
@media (min-resolution: 2dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.25px;
  }
}

Demo

说明

1. 当只使用 box-shadow 的扩散功能时，可以为其添加一个能够使用子像素的伪边框
2. 使用 @media (min-resolution: ...) 来检测设备像素比率（1dppx 等于 96DPI），设置 box-shadow 的扩散为 1 / dppx

浏览器支持

支持率：97.7%
支持情况：

• https://caniuse.com/#feat=css-boxshadow
• https://caniuse.com/#feat=css-media-resolution

⚠️：

• 需要多种适配语法及使用 JavaScript 来探测浏览器头以获取完全的支持
• 在 Chrome 中，border 不支持其值为子像素。在 Safari 中，box-shadow 不支持其值为子像素。在 Firefox 中，两者都支持其值为子像素

返回总目录

每天 30 秒系列之 CSS