css - 如何仅使用实心边框近似 CSS box-shadow 属性？

Question

请注意，问题不是关于 CSS，而是关于图像、颜色和一些数学知识。我们在这里不是在谈论如何在 CSS 中做事。确保您的答案不包含单行 CSS。请仅提供数学、表格、图像和公式。

我需要一种方法（数据表、公式等）来计算足够好的border-width和border-color的 alpha 通道值（假设我们使用border-style: solid）来模拟 blur-radius和spread-radius相同颜色的框阴影（假设没有 X 和 Y 偏移） ，至少，从人眼感知的角度来看。

下面是一个黑色的例子，rgb(0,0,0)范围blur-radius从 1px 到 8px。

目前，我正在根据模糊值为每个下一个阴影像素构建一个不透明度数据表，如果我们假设发生 alpha 混合（白色+黑色），那么前三个像素的不透明度看起来是这样的（至少，在谷歌浏览器中）：

但是，即使我收集了一些经验证据并尝试了一些想法，我也不知道如何定量地比较我的近似值和原始 box-shadow 版本。如果我无法衡量，我就无法判断一个想法是否真的有效。

也许你有一些想法如何选择最匹配的边框宽度和颜色？

提前致谢。

Answer 1

有时我们必须回答自己的问题。我做了什么来回答我的问题-见下文：

我使用此实用程序 HTML 准备了 16x16 网格的 Chrome 屏幕截图（120 像素 x 120 像素）：

https://noomorph.com/approximate-box-shadow-using-border/screenshotter/

40x40它使用阴影模糊 =0..15px和阴影大小 =渲染一个正方形网格0..15px。

然后，我将大页面屏幕截图 (1920x1920) 剪切为 256 个较小的屏幕截图，如下面的链接中的这个。我的snake_case约定是<shadow-size>_<shadow-blur>.png：

https://github.com/noomorph/approximate-box-shadow-using-border/blob/master/scripts/00_15.png

使用 ImageMagick convert, grep, sed, sort，uniq我为每个图像生成了统计信息：

https://github.com/noomorph/approximate-box-shadow-using-border/blob/master/scripts/00_15.png.stats

使用这个小脚本，我生成了 JSON 数组，例如{ size, blur, colors: [{ count, value }]}：

https://github.com/noomorph/approximate-box-shadow-using-border/blob/master/scripts/aggregate_stats.js

然后使用简单的算术、基本距离公式D=(C1-C2)^2（其中 C1 和 C2 分别是两种颜色的灰色通道）和蛮力（border-width=0..20和 RGB 灰度通道= 1..255）我已经得到了你可以在我的演示站点上看到的映射 I'我为此而建：

https://noomorph.com/approximate-box-shadow-using-border/

我试图构建一些 3D 和 4D 图，但仍然不确定 和 之间相关性的box-shadow性质border。我真诚地希望我的小研究对未来的人有所帮助。

快乐黑客！