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

Question

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

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

以下是黑色 rgb(0,0,0) 的示例颜色和blur-radius范围从 1px 到 8px。










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



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

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

提前致谢。

Answer 1

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

我已经使用此实用程序 HTML 准备了 16x16 网格的 Chrome 屏幕截图(120px x 120px):

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

它呈现了 40x40 的网格带有阴影模糊的方块 = 0..15px和阴影大小 = 0..15px .



然后我将大页面截图 (1920x1920) 剪成 256 个较小的截图，如下面的链接中的这个截图。我的蛇案例约定是 <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 分别是两种颜色的灰色 channel )和蛮力(边框宽度 = 0..20 和 RGB 灰度 channel = 1..255)我有你可以在我构建的演示站点上看到的映射为了这:

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



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



快乐黑客!