html - 为什么字体上的剪辑路径、透视和线性渐变在 IE11/Edge 上不起作用

Question

我正在尝试制作一些多边形、旋转动画效果和字体渐变。 Chrome 和 Firefox 工作正常，但 Internet Explorer 11 无法正常工作。我正在研究 SASS。我做了一些研究，尝试了一些例子，但没有一个奏效。我在 IE/11 上遇到了某些问题。

• 预期属性(包含前缀/
  不工作)

• 剪辑路径:多边形不工作

• 线性渐变不适用于字体

  display: inline-block;
  background-image: linear-gradient(to right top, #bd74c2, #69306D);
  -webkit-background-clip: text;
  -ms-background-clip: text;
  

这是我的代码 JSFiddle

在我的研究中，它说此属性的某些部分适用于 IE10+，但我在 IE11 上遇到问题。有没有其他方法可以处理这些属性。

Answer 1

IE11 上的问题是 -ms-background-clip: text 不会工作。可以在 caniuse 网站上找到更多信息:

Firefox, Chrome and Safari support the unofficial -webkit-background-clip: text (only with prefix)

引用:https://caniuse.com/#search=background-clip

您在 IE11 上的选项是让您的字体回落到纯色(优雅降级)，使用 svg 代替 DayOne建议或用该浏览器上的图像替换文本(严重的老派)