CSS3j背景渐变,字体颜色渐变,以及兼容IE写法

一、背景渐变

#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;
}

猜你喜欢

转载自www.cnblogs.com/webwangjie/p/10001482.html