如何仅使用实线边框来近似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混合（白色+黑色），那么对于前三个像素，不透明度就是这样的（至少在Google Chrome中）：

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

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

提前致谢。

Answer 1

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

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

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我已经在我为此构建的演示网站上看到了映射：

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

我正在尝试构建一些3D和4D图，但仍然不确定1..255和box-shadow之间相关性的性质。我真诚地希望我的小型研究能够在将来帮助某些人。

快乐的黑客攻击！