CSS：奇怪的盒子阴影过渡

Question

我有一个与它旁边的元素颜色相同的盒子阴影，我正在使用CSS过渡来淡化它们。盒阴影和背景颜色的css过渡是相同的，所以我不明白为什么它们看起来以不同的速率淡入。

Here a jsfiddle to reproduce the issue，这是相关的SCSS：

SELECT *,
  CASE WHEN name = 'Bob Barker' THEN 'TRUE'   ELSE 'FALSE' END AS result1
FROM usersTbl 
WHERE name = 'Bob Barker'
AND active = 1

Answer 1

对我来说，这不是因为不同的费率。你是这样觉得的，因为当蓝色背景的不透明度为0.25时，阴影的0.25也是如此。所以两个0.25的不透明度重叠使你感觉它是0.5;

我改变了你的小提琴以避免重叠，我也删除了重叠的边框颜色。你可以看到以前的感觉。

.right-of-blue {
  box-shadow: 0 8px transparent;
}

点击此处：

https://jsfiddle.net/ahmadm/kxyua0dj/