什么是渐变?
渐变显示两种或多种颜色的组合,如下所示 :
Types of gradients
线性渐变(向下/向上/向左/向右/对角线)
径向梯度
Linear gradients
线性渐变用于以线性格式(如从上到下)排列两种或更多种颜色。
Top to bottom
<html> <head> <style> #grad1 { height: 100px; background: -webkit-linear-gradient(pink,green); background: -o-linear-gradient(pink,green); background: -moz-linear-gradient(pink,green); background: linear-gradient(pink,green); } </style> </head> <body> <div id = "grad1"></div> </body> </html>
Left to right
<html> <head> <style> #grad1 { height: 100px; background: -webkit-linear-gradient(left, red , blue); background: -o-linear-gradient(right, red, blue); background: -moz-linear-gradient(right, blue); background: linear-gradient(to right, blue); } </style> </head> <body> <div id = "grad1"></div> </body> </html>
Diagonal
对角线从左上角和右上角开始。
<html> <head> <style> #grad1 { height: 100px; background: -webkit-linear-gradient(left top, blue); background: -o-linear-gradient(bottom right, blue); background: -moz-linear-gradient(bottom right, blue); background: linear-gradient(to bottom right, blue); } </style> </head> <body> <div id = "grad1"></div> </body> </html>
Multi color
<html> <head> <style> #grad2 { height: 100px; background: -webkit-linear-gradient(red, orange, yellow, blue, green,pink); background: -o-linear-gradient(red,pink); background: -moz-linear-gradient(red,pink); background: linear-gradient(red,pink); } </style> </head> <body> <div id = "grad2"></div> </body> </html>
CSS3 Radial Gradients
径向渐变出现在中心。
<html> <head> <style> #grad1 { height: 100px; width: 550px; background: -webkit-radial-gradient(red 5%, green 15%, pink 60%); background: -o-radial-gradient(red 5%, pink 60%); background: -moz-radial-gradient(red 5%, pink 60%); background: radial-gradient(red 5%, pink 60%); } </style> </head> <body> <div id = "grad1"></div> </body> </html>
CSS3 Repeat Radial Gradients
<html> <head> <style> #grad1 { height: 100px; width: 550px; background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%); background: -o-repeating-radial-gradient(blue, green 15%); background: -moz-repeating-radial-gradient(blue, green 15%); background: repeating-radial-gradient(blue, green 15%); } </style> </head> <body> <div id = "grad1"></div> </body> </html>