css实现文字渐变并兼容IE浏览器

css文字渐变写法

color: #fff;
background: linear-gradient(to bottom, #fff5b9, #f3d380);
-webkit-text-fill-color:transparent;
-webkit-background-clip: text;

在IE浏览器中不支持这种写法，可以使用svg在IE浏览器中实现文字渐变效果

<svg width="81" height="22"><defs><linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#fff5b9; stop-opacity:1" /><stop offset="100%" style="stop-color:#f3d380; stop-opacity:1" /></linearGradient></defs><text x="0" y="16" fill="url(#grad)" style="font-size:16px;font-weight: bold;">测试文字</text>
</svg>

x1-x2：是x轴变换
y1-y2：是y轴变换
像demo中的就是从上往下渐变

stop-color：是变化的颜色

亲测有效！！！！！

css实现文字渐变并兼容IE浏览器相关推荐

css 实现文字渐变以及文字颜色流动
文字渐变需要了解以下属性: background-image:背景色 background-clip:此属性规定背景的绘制区域,有四个值: border-box,背景被裁剪到边框盒. padding- ...
使用CSS隐藏元素滚动条【兼容主流浏览器】
如何隐藏滚动条,同时仍然可以在任何元素上滚动? 首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置 overflow:auto 样式即可.想要完全隐藏滚动条只需设置 overflow:hid ...
css透明度的设置（兼容所有浏览器）
一句话搞定透明背景! .transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity ...
html 文字倒映效果,如何用css实现文字渐变倒影？求教怎么做？
HTML部分 CSS部分body{background:#000;color:#f00} .wrap{position:relative;} .image{margin-bottom:3px;} ...
CSS clear 清除浮动，兼容各浏览器
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clear{zoom ...
css浮动层被遮盖,兼容主流浏览器的背景遮盖和居中浮动层的CSS样式
html, body { height: 100%; margin: 0px; font-size: 12px; } .mydiv { background: #f1f1f1; padding: 15 ...
html字体如何设置渐变,CSS 实现文字渐变色
CSS实现文字渐变,有下面两种方法: 1. background 属性 .text-gradient { background-image: linear-gradient(to right, ora ...
css3三角形兼容_利用css3特性写出三角形（兼容IE浏览器）
利用CSS写出三角形的效果效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...
html渐变不兼容,CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器
一.有点俗态的开场白要是两年前,实现"兼容性的渐变效果"这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持 ...

css实现文字渐变并兼容IE浏览器

css实现文字渐变并兼容IE浏览器

css实现文字渐变并兼容IE浏览器相关推荐

最新文章

热门文章