浏览器小于1px渲染的差异

最新推荐文章于 2024-08-24 23:18:41 发布

weixin_33714884

最新推荐文章于 2024-08-24 23:18:41 发布

阅读量717

点赞数

CC 4.0 BY-SA版权

文章标签：前端人工智能 ViewUI

原文链接：https://juejin.im/post/5a3e6e37f265da432a7bca84

探讨了在非Retina屏幕下，如何使用CSS技巧实现小于1px的边框效果，包括使用border、图片模拟、scale和box-shadow等方法。通过实验对比不同属性的影响，揭示浏览器渲染亚像素边框的机制。

前言

穷，太多东西没法测，有错误的地方可以来喷哦~~~

在非retina屏下，如果设计让我们弄个.5px的边框啥的其实很麻烦，貌似只有safari(ios8+)支持使用border: .5px;，所以我们有了如下四种方法：

border: < 1px：听天由命，通常会被美工锤死
图片模拟：同上
scale（本文要说的）
box-shadow，我更喜欢这个，其实原理和scale一样还不占位置，还不知道为什么不用但是网上没什么人说用这个模拟，maybe是兼容性问题？

好了进入正题，就是同事说用border模拟.5px比height更细，我当时觉得这不可能啊，结果看上去真的细了，那么作为一个刚听完匠心的人，一定要试试！

测试案例

分类杂乱看看就好，下面分类分析

// 单个通用属性
div {
    width: 200px;
    transform: scaleY(.5);
    height: 1px;
    border-width: 1px
}
复制代码

分析

第一组（左一）

属性	第一个	第二个	第三个	第四个
background-color	green	black	black	none
border-color	black	green	none	black

对比上面发现：

1，2 组：border-color受到background-color颜色的影响
4组证明了为什么border比background看起来更细（受到背景色的影响）
2，3 组：background-color受到border-color颜色的影响

结论：浏览器在小于1px时，会让颜色变淡形成视觉上的缩小，border-color和bakcground-color互相影响，颜色相互接近，具体计算我不知道T_T，但是由2，3，4组可推测bakcground-color对border-color的影响大于border-color对background-color的影响