html - 为什么 'filter' 在 Windows 8 应用程序中不是已知的 CSS3 属性名称？

Question

我正在重新创建自己的 pen适用于 Windows 8 桌面应用程序。如您所见，它在 Codepen 上完美运行。除了 CSS，我已经将 -webkit- 修改为 -ms-。但是 CSS 表中的这一行

filter:url("#mercury");

在 Visual Studio 2012 中出现错误:

validation (CSS 3.0): filter is not known property name

这是什么原因？创建 Windows 8 桌面应用程序时，filter 属性的替代方法是什么？

Answer 1

What is the alternative to filter attribute while creating Windows 8 Desktop application?

改用 SVG filter 元素:

  <filter id="f1" x="-20%" y="-20%" width="160%" height="160%">
    <feGaussianBlur in="SourceAlpha" result="blurOut" stdDeviation="8"/>
    <feOffset in="blurOut" result="dropBlur" dx="0" dy="0"/>

  <feComponentTransfer in="dropBlur" result="dropBlur2">
    <feFuncA id="alphaFunc" type="gamma" amplitude="2" exponent="1.5" offset="0"/>
  </feComponentTransfer>

  <feComposite operator="over" in="SourceGraphic" in2="dropBlur2"/>
</filter>

然后使用哈希 URL 中的 ID 引用该元素。

引用资料

• SVG Filter Codepen Demo

• SVG Filter Effects in IE10

• > CSS3 filter: drop-shadow spread property alternatives