渐变显示两种或更多种颜色的组合,如下所示-
线性渐变用于以线性格式(如从上到下)排列两种或多种颜色。
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>
它将产生以下输出-
链接:https://www.learnfk.comhttps://www.learnfk.com/css/css3-gradients.html
来源:LearnFk无涯教程网
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>
它将产生以下输出-
链接:https://www.learnfk.comhttps://www.learnfk.com/css/css3-gradients.html
来源:LearnFk无涯教程网
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>
它将产生以下输出-
链接:https://www.learnfk.comhttps://www.learnfk.com/css/css3-gradients.html
来源:LearnFk无涯教程网
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>
它将产生以下输出-
链接:https://www.learnfk.comhttps://www.learnfk.com/css/css3-gradients.html
来源:LearnFk无涯教程网
径向渐变出现在中心。
<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>
它将产生以下输出-
链接:https://www.learnfk.comhttps://www.learnfk.com/css/css3-gradients.html
来源:LearnFk无涯教程网
<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.comhttps://www.learnfk.com/css/css3-gradients.html
来源:LearnFk无涯教程网
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)