一、背景渐变
#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时代表水平
二、文字渐变
span {
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
}