Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

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%
支持情况:

⚠️:

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

返回总目录

每天 30 秒系列之 CSS


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

推荐阅读
留下你的脚步