渐变显示两种或更多种颜色的组合,如下所示-
线性渐变
线性渐变用于以线性格式(如从上到下)排列两种或多种颜色。
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, red, blue); background: linear-gradient(to right, red , blue); } </style> </head> <body> <div id="grad1"></div> </body> </html>
它将产生以下输出-
Diagonal (对角线渐变) - 对角线从左上方和右上方的按钮开始。
<html> <head> <style> #grad1 { height: 100px; background: -webkit-linear-gradient(left top, red , blue); background: -o-linear-gradient(bottom right, red, blue); background: -moz-linear-gradient(bottom right, red, blue); background: linear-gradient(to bottom right, red , 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, red, blue, green,pink); background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink); background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink); background: linear-gradient(red, orange, yellow, red, blue, green,pink); } </style> </head> <body> <div id="grad2"></div> </body> </html>
它将产生以下输出-
CSS3径向渐变
径向渐变出现在中心。
<html> <head> <style> #grad1 { height: 100px; width: 550px; background: -webkit-radial-gradient(red 5%, green 15%, pink 60%); background: -o-radial-gradient(red 5%, green 15%, pink 60%); background: -moz-radial-gradient(red 5%, green 15%, pink 60%); background: radial-gradient(red 5%, green 15%, pink 60%); } </style> </head> <body> <div id="grad1"></div> </body> </html>
它将产生以下输出-
CSS3重复径向渐变
<html> <head> <style> #grad1 { height: 100px; width: 550px; background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%); background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%); background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%); background: repeating-radial-gradient(blue, yellow 10%, green 15%); } </style> </head> <body> <div id="grad1"></div> </body> </html>
它将产生以下输出-
参考链接
https://www.learnfk.com/css/css3-gradients.html
标签:CSS3,blue,linear,gradient,无涯,green,background,Gradients,red From: https://blog.51cto.com/u_14033984/9395734