你能在 CSS 中创建内嵌阴影吗？

Question

我有一个

<img>

标签，其中包含一些透明部分的图像。在该图像的顶部，我想显示一种阴影以赋予其一定的深度。关键部分是阴影应该插入在图像边界内，而不是像常规投影那样围绕图像。

如果我将

box-shadow

属性与

inset

选项一起使用，我会得到与我正在寻找的类似的结果，但该阴影落在图像周围的矩形内容框上，完全忽略图像中的透明度。

img {
  box-shadow: inset 0px 0px 10px;
}

<img src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" width=100/>

我会使用

drop-shadow

滤镜来根据需要处理图像中的透明度，但我找不到任何与

drop-shadow

的

inset

选项等效的

box-shadow

选项。

Answer 1

你在找吗？

filter: drop-shadow(0px 0px 20px red)

Answer 2

你好，最近怎么样？是的，可以，但必须将其与 SVG 标签一起使用，而不是与 IMG 一起使用。下面小编就为大家带来具体的操作方法，希望对大家有所帮助。

Firefox 投影

如果你想了解更多，可以看看这个链接

使用 css 和 svg 过滤器将阴影添加到 svg 图标