CSS3j背景漸變,字型顏色漸變,以及相容IE寫法
阿新 • • 發佈:2018-11-22
一、背景漸變
#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;
}