- 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
- 径向渐变(Radial Gradients)- 由它们的中心定义
一、线性渐变
background:linear-gradient(direct , color1 n%, color2 n% , color3 n%, color4 n%, color5 n%)
direct:(to right, to left ,to top ,to bottom ,top left , top bottom , bottom left , bottom right ,0~360deg)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { border: 1px solid black; width: 100px; height: 100px; background: -webkit-linear-gradient(red, green,yellow); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, green,yellow); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, green,yellow); /* Firefox 3.6 - 15 */ background: linear-gradient(65deg,red 10%, green 20%,yellow 70%); /* 标准的语法 */ } </style> </head> <body> <div></div> </body> </html> |
结果:
****使用透明度****
将color:rgb(ff,ff,ff,1);调节透明度就可以了
二、径向渐变
其他的和线性渐变一样,只有一个不一样,如下所示