CSS transform:scale 会改变 background 的色值？

[cheeto]

为了实现 0.3px 的线，用 3px+transfrom：scaleY （ 0.1 ）去做，#DBDBDB 在实际手机截屏颜色不符，sketch 取色值为#F9F9F9

难道 scale 也会把颜色压缩到一起？？？

[hoyixi]

1 这么细，取色取准了吗
2 border ？小于 1px 无法实现吧，记得 0.5 都不行

[cheeto]

@hoyixi 准的，设计师把截屏放大到最大叠图+取色。
就是因为没法实现小于 1px 的 border，所以想到用 scale 缩小，最后除了颜色其他都与 UI 契合

[rioshikelong121]

emmm.. mark. 没实现过这种需求。

[rioshikelong121]

google: 怎么画一条 0.5px 的边

[cheeto]

@rioshikelong121 单纯的画 0.5px 的线没问题，如果颜色是#000 的话也没问题，问题在于如果是其他颜色的话，实际渲染到屏幕与期望不符

[hnsxxscyx]

就是因为太细了系统无法渲染了才把色值混了吧，太细了，dpr 为 3 的屏幕物理像素都表现不出来，有意义吗？

[cheeto]

@hnsxxscyx 推测应该也是这个原因。没办法，必须百分百还原设计稿，差 0.5 像素都不行😭

[noe132]

如果 devicePixelRatio > 1 / 0.3，那就可能画出 0.3px 的线。否则就是被反锯齿颜色混合了，要么就是线直接消失不渲染了

[cheeto]

@noe132 了解了，感谢

[Vegetable]

猜一下
假如这是显示器的话,一个像素只能显示一个颜色,如果要实现 0.3px 的线,那剩下的 0.7 个像素的颜色是不是就和这 0.3 混合了呢?混合之后颜色是不是就变了呢.

[Vegetable]

@cheeto 设计稿给出 0.3 像素的宽度挺搞笑的,那你让他出 1:1 的设计稿就好了...

[userdhf]

100%还原是不可能的，光文字就不可能啊。。

[cheeto]

@userdhf 文字内容不在考虑范围内，样式必须一致...反正要求极高，截屏叠图到一起，一点点都不能差😢

[lk920724]

试试阴影？

[cheeto]

@lk920724 嗯，试过，在某些机型下小于 1px 的阴影直接消失了

[hewelzei]

“截屏放大到最大叠图+取色”这就离谱，图像渲染的时候不可能直接渲染的，任何颜色边界只要放大了看就会有过渡。

[randyo]

厉害了，90%还原就不错了。100%还原是不是不用考虑响应式

[hewelzei]

我觉得你这个 UI 连基础的像素知识都不了解，0.3px 还截图放大取色，挺逗的

[lxrmido]

0.3px 的线是画不出实线来的，因为除不尽，0.5、0.25 都能在浏览器放大（而不是截屏放大）的操作下看到正确的颜色值，0.3 就必定是跟其他像素混合后的颜色值了

[lk920724]

@cheeto 用图吧...或者适配部分机型？成功了 @我下，谢谢。