一、背景渐变
#grad { background: linear-gradient(red, blue); }
渐变路径默认是从上到下,也可以指定路径:
//从左到右 #grad { background: linear-gradient(to right, red , blue); } //从左上角到右下角 #grad { background: linear-gradient(to bottom right, red , blue); }
注:低版本IE不支持css3的渐变,可以通过滤镜来实现渐变效果
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0'); 参数:startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直,为1时代表水平
二、文字渐变
HTML代码:
<h2 class="text-gradient">文字渐变</h2>
第一种方法:
span { background: linear-gradient(to right, red, blue); -webkit-background-clip: text; background-clip: text; color: transparent; }
第二种方法:
.text-gradient { display: inline-block; color: green; font-size: 10em; font-family: '微软雅黑'; background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1))); -webkit-background-clip: text; -webkit-text-fill-color: transparent; };