如何仅使用实体边框近似CSS框阴影属性?
请注意,这个问题不是关于CSS,而是关于图像、颜色和一点数学。我们这里不是在讨论如何用CSS做事情。确保您的答案不包含一行CSS。仅限数学、表格、图像和公式 我需要一种方法(数据表、公式等)来计算足够好的如何仅使用实体边框近似CSS框阴影属性?,css,gaussianblur,perception,Css,Gaussianblur,Perception,请注意,这个问题不是关于CSS,而是关于图像、颜色和一点数学。我们这里不是在讨论如何用CSS做事情。确保您的答案不包含一行CSS。仅限数学、表格、图像和公式 我需要一种方法(数据表、公式等)来计算足够好的边框宽度和边框颜色的alpha通道值(假设我们使用边框样式:实心),以模拟相同颜色的框阴影的模糊半径和扩散半径)(假设没有X和Y偏移),至少从人眼感知的角度来看是这样 下面是黑色rgb(0,0,0)颜色和模糊半径的示例,范围从1px到8px 目前,我正在根据模糊值为每一个下一个阴影像素构建一
边框宽度
和边框颜色
的alpha通道值(假设我们使用边框样式:实心
),以模拟相同颜色的框阴影的模糊半径
和扩散半径
)(假设没有X和Y偏移),至少从人眼感知的角度来看是这样
下面是黑色rgb(0,0,0)
颜色和模糊半径的示例,范围从1px到8px
目前,我正在根据模糊值为每一个下一个阴影像素构建一个不透明度数据表,如果我们假设alpha混合发生(白色+黑色),那么前三个像素的不透明度是这样看的(至少在Google Chrome中):
但是,即使我收集了一些经验证据并尝试了一些想法,我也不知道如何定量地比较我的近似值和原始的盒子阴影版本。如果我不能测量,我就无法判断一个想法是否真的有效
也许你有一些想法如何选择最匹配的边框宽度和颜色
提前感谢。有时我们必须回答自己的问题。我做了什么来回答我的问题-见下文:
我已经准备了16x16格的Chrome屏幕截图(120px 120px),使用这个实用程序HTML:
它以阴影模糊=0..15px
和阴影大小=0..15px
渲染一个由40x40
正方形组成的网格
然后,我将大页面截图(1920x1920)剪切为256个较小的截图,如下面链接中的这一个。我的snake_案例惯例是.png
:
使用ImageMagickconvert
,grep
,sed
,sort
,uniq
我为每个图像生成了统计数据:
使用这个小脚本,我生成了JSON数组的大小写,比如{size,blur,colors:[{count,value}]}
:
然后使用简单的算术,基本距离公式D=(C1-C2)^2
(其中C1和C2分别是两种颜色的灰色通道)和蛮力(边框宽度=0..20
和RGB灰度通道=1..255
)我已经得到了您可以在我的演示网站上看到的映射,我为此构建了:
我试图绘制一些3D和4D图,但仍然不确定框影
和边框
之间的相关性的性质。我真诚地希望我的小研究对将来的人有所帮助
快乐的黑客