[英]CSS: browser compatibility issues using 'background-clip: text' and linear-gradient
[英]CSS background gradient with text background-clip not working in Internet Explorer
h1 { font-family: "Comic Sans MS", "Comic Sans", cursive; text-align: center; letter-spacing: 0.5px; font-size: 2.4rem; background-image: -webkit-linear-gradient(left, rgb(140, 198, 63), rgb(0, 185, 245)); background-image: -moz-linear-gradient(left, rgb(140, 198, 63), rgb(0, 185, 245)); background-image: -ms-linear-gradient(left, rgb(140, 198, 63), rgb(0, 185, 245)); background-image: -o-linear-gradient(left, rgb(140, 198, 63), rgb(0, 185, 245)); background-image: linear-gradient(to right, rgb(140, 198, 63), rgb(0, 185, 245)); background-clip: content-box; -webkit-background-clip: text; color: transparent; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: white; -moz-text-stroke-width: 2px; -moz-text-stroke-color: white; -ms-text-stroke-width: 2px; -ms-text-stroke-color: white; -o-text-stroke-width: 2px; -o-text-stroke-color: white; text-stroke-width: 2px; text-stroke-color: white; }
<h1>Heading.. Appears good in Chrome but not in IE :( </h1>
上面是HTML和CSS代码。 该代码在Google Chrome浏览器中运行良好。 但是,相同的代码在Internet Explorer中无法正常工作-10,11,Edge。 我怀疑错误是在背景剪辑中。 请帮忙。
这里的问题是-webkit-text-stroke-width: 2px;
仅在Edge中受支持。
IE11及以下版本不支持text-stroke
和text-fill
。
如需进一步阅读,请查阅此文章 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.