css - Webkit 过滤器作为文本或框阴影

Question

有没有办法获得文本阴影或框阴影，其行为类似于 a -webkit-filter:saturate(50%);(or brightness(80%);) 在整个选择器上的查看方式？基本上，我需要任何阴影落在饱和/去饱和。

为什么？我将文本放在图像上，我认为模糊或去饱和文本周围的空间会是一个很酷的效果。最后，效果看起来像这样：

这不是一个白色的文字阴影，它基本上是一个带有“颜色减淡”混合模式的文字阴影，它完成了我想要的效果。有什么办法可以在 CSS 中做到这一点？

Answer 1

一种可能的解决方案可能涉及-webkit-filter: blur()伪元素和伪元素的组合。例如：演示

这也可以与给定的任何文本阴影结合使用。不确定这是否能完美解决问题，因为对文本的影响并没有真正评估背景颜色，但它可能适用于您的目的。有趣的挑战，并且将是内置到 css 的有用功能。