为了实现 0.3px 的线,用 3px+transfrom:scaleY ( 0.1 )去做,#DBDBDB 在实际手机截屏颜色不符,sketch 取色值为#F9F9F9
难道 scale 也会把颜色压缩到一起???
1
hoyixi 2019-11-21 15:55:13 +08:00
1 这么细,取色取准了吗
2 border ?小于 1px 无法实现吧,记得 0.5 都不行 |
2
cheeto OP @hoyixi 准的,设计师把截屏放大到最大叠图+取色。
就是因为没法实现小于 1px 的 border,所以想到用 scale 缩小,最后除了颜色其他都与 UI 契合 |
3
rioshikelong121 2019-11-21 16:23:29 +08:00
emmm.. mark. 没实现过这种需求。
|
4
rioshikelong121 2019-11-21 16:36:26 +08:00
google: 怎么画一条 0.5px 的边
|
5
cheeto OP @rioshikelong121 单纯的画 0.5px 的线没问题,如果颜色是#000 的话也没问题,问题在于如果是其他颜色的话,实际渲染到屏幕与期望不符
|
6
hnsxxscyx 2019-11-21 16:41:14 +08:00
就是因为太细了系统无法渲染了才把色值混了吧,太细了,dpr 为 3 的屏幕物理像素都表现不出来,有意义吗?
|
8
noe132 2019-11-21 16:43:06 +08:00 2
如果 devicePixelRatio > 1 / 0.3,那就可能画出 0.3px 的线。否则就是被反锯齿颜色混合了,要么就是线直接消失不渲染了
|
10
Vegetable 2019-11-21 16:46:09 +08:00
猜一下
假如这是显示器的话,一个像素只能显示一个颜色,如果要实现 0.3px 的线,那剩下的 0.7 个像素的颜色是不是就和这 0.3 混合了呢?混合之后颜色是不是就变了呢. |
12
userdhf 2019-11-21 16:47:19 +08:00
100%还原是不可能的,光文字就不可能啊。。
|
14
lk920724 2019-11-21 17:02:16 +08:00
试试阴影?
|
16
hewelzei 2019-11-21 17:23:56 +08:00 1
“截屏放大到最大叠图+取色”这就离谱,图像渲染的时候不可能直接渲染的,任何颜色边界只要放大了看就会有过渡。
|
17
randyo 2019-11-21 17:27:41 +08:00 via Android
厉害了,90%还原就不错了。100%还原是不是不用考虑响应式
|
18
hewelzei 2019-11-21 17:27:52 +08:00
我觉得你这个 UI 连基础的像素知识都不了解,0.3px 还截图放大取色,挺逗的
|
19
lxrmido 2019-11-21 17:32:29 +08:00
0.3px 的线是画不出实线来的,因为除不尽,0.5、0.25 都能在浏览器放大(而不是截屏放大)的操作下看到正确的颜色值,0.3 就必定是跟其他像素混合后的颜色值了
|
21
yammy 2019-11-22 11:20:37 +08:00
字体和边框的颜色外层会淡一些的,并不是你定义多少,所有的像素点都变成你那个颜色,你可以换个颜色用 chrome 自带的工具去放大取,会发里面有很多种颜色。
|