css - 使用纯 CSS 将调光应用到通用元素的外部，而不使用遮罩或剪辑

Question

我正在尝试将调光应用于元素的外部。不幸的是，CSS 中的 clip 和 mask 属性仅适用于图像或 svg 路径。这是我想要的效果的两个示例。我不想使用 JavaScript，只使用纯 CSS。

图像裁剪器的蒙版

视频修剪器的面具

Answer 1

Adam Argyle（Google DevRel 的成员）想出了一个对我有用的解决方案。

从您想要“透视”的元素投射一个具有非常大的散布（例如 200vmin）的盒子阴影，并将溢出：剪辑属性应用于容器元素。

.see-through-element {
  box-shadow: 0 0 0 100vmin hsl(0 0% 0% / 40%);
}

.container-element {
  overflow: clip;
}

代码笔： https ://codepen.io/argyleink/pen/MWpyxKd 。