Question

阴影过滤器被忽略。

我是一个初学者，所以也许我的语法不正确？灰度已正确应用，所以我知道我正在正确处理图像。

img#mportrait{
  -webkit-filter: drop-shadow(15px 0px 5px rgba(51, 51, 51, 0.9));
  filter: drop-shadow(15px 0px 5px rgba(51, 51, 51, 0.9));
  filter: grayscale(0.7);
}

页面检查的结果：https://imgur.com/a/kONGtC3

Answer 1

每个连续的过滤规则都将否决最后一个过滤规则。因此，您想要做的就是将规则与空格结合起来，在规则的前缀版本和非前缀版本中重复grayscale()：

img#mportrait{
  -webkit-filter: drop-shadow(15px 0px 5px rgba(51, 51, 51, 0.9)) grayscale(0.7);
  filter: drop-shadow(15px 0px 5px rgba(51, 51, 51, 0.9)) grayscale(0.7);
}

grayscale()仅在您的示例中有效，因为在取消了前面的规则之后，它是唯一应用的规则。

Answer 2

阴影是其自身的属性，即box-shadow: ____。因此您的代码将是：

img#mportrait{
  -webkit-filter: drop-shadow(15px 0px 5px rgba(51, 51, 51, 0.9));
  box-shadow: 15px 0px 5px rgba(51, 51, 51, 0.9);
  filter: grayscale(0.7);
}

这来自this MDN article和this W3Schools article。
希望对您有所帮助。

我的阴影过滤器语法不正确吗？

2 个答案: