html5 – 为什么字体上的剪辑路径,透视和线性渐变不适用于IE11 / Edge

我正在尝试制作一些多边形,旋转动画效果和字体上的渐变. Chrome和Firefox工作正常,但Internet Explorer 11无法正常工作.我在SASS工作.
我已经做了一些研究尝试了一些例子,但非有效.
我在IE / 11上遇到了一些问题.

>预期财产(包括前缀/
不工作)
> clip-path:多边形不起作用
>线性渐变不适用于字体

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

这是我的代码JSFiddle

在我的研究中,它说这个属性的一些将在IE10上工作但我在IE11上有问题.有没有其他方法来处理这些属性.

解决方法

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或用该浏览器上的图像替换文本(严重老派)

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码