简单的渐变
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* -webkit-gradient(<type>,<point>[,<radius>]?,<point>[,<radius>]?[,<stop>]*) 改函数的参数说明如下: <type>:定义渐变类型,保罗线性渐变(linear)和径向渐变(radial) <point>:定义渐变起始点和结束点坐标,既开始应用渐变的X轴和Y轴坐标,以及结束渐变的坐标。该参数支持数值、百分比和关键字,如(0,0)或者(left top)等。关键字包括top bottom 、left 和right <radius>:定义渐变色和步长。包括3个类型值,既开始的颜色,使用from(colorvalue)函数定义:结束的颜色,使用to(colorvalue)函数定义:颜色步长,使用colorstop(value,color value)定义.color-stop()函数包含两个参数值,第一个参数值为一个数值或者百分比值,取值范围为0-1.0(或者0%-100%),第二个参数值表示任意颜色值 */ div{ 400px; height:200px; border:2px solid #fcf; padding:4px; background:-webkit-gradient(linear,left top,left bottom,from(blue),to(red)); -webkit-background-origin:padding-box; -webkit-background-clip:content-box; } </style> </head> <body> <div></div> </body> </html>
二重渐变
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* -webkit-gradient(<type>,<point>[,<radius>]?,<point>[,<radius>]?[,<stop>]*) 改函数的参数说明如下: <type>:定义渐变类型,保罗线性渐变(linear)和径向渐变(radial) <point>:定义渐变起始点和结束点坐标,既开始应用渐变的X轴和Y轴坐标,以及结束渐变的坐标。该参数支持数值、百分比和关键字,如(0,0)或者(left top)等。关键字包括top bottom 、left 和right <radius>:定义渐变色和步长。包括3个类型值,既开始的颜色,使用from(colorvalue)函数定义:结束的颜色,使用to(colorvalue)函数定义:颜色步长,使用colorstop(value,color value)定义.color-stop()函数包含两个参数值,第一个参数值为一个数值或者百分比值,取值范围为0-1.0(或者0%-100%),第二个参数值表示任意颜色值 */ div{ 400px; height:200px; border:2px solid #fcf; padding:4px; /* 简单渐变 */ /* background:-webkit-gradient(linear,left top,left bottom,from(blue),to(red)); */ /* 二重渐变 从蓝色到白色渐变 再从黑色到红色渐变显示*/ background:-webkit-gradient(linear,left top,left bottom,from(blue),to(red),color-stop(0.5,#fff),color-stop(0.5,#000)); -webkit-background-origin:padding-box; -webkit-background-clip:content-box; } </style> </head> <body> <div></div> </body> </html>
多重渐变
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* -webkit-gradient(<type>,<point>[,<radius>]?,<point>[,<radius>]?[,<stop>]*) 改函数的参数说明如下: <type>:定义渐变类型,保罗线性渐变(linear)和径向渐变(radial) <point>:定义渐变起始点和结束点坐标,既开始应用渐变的X轴和Y轴坐标,以及结束渐变的坐标。该参数支持数值、百分比和关键字,如(0,0)或者(left top)等。关键字包括top bottom 、left 和right <radius>:定义渐变色和步长。包括3个类型值,既开始的颜色,使用from(colorvalue)函数定义:结束的颜色,使用to(colorvalue)函数定义:颜色步长,使用colorstop(value,color value)定义.color-stop()函数包含两个参数值,第一个参数值为一个数值或者百分比值,取值范围为0-1.0(或者0%-100%),第二个参数值表示任意颜色值 */ div{ 400px; height:200px; border:2px solid #fcf; padding:4px; /* 简单渐变 */ /* background:-webkit-gradient(linear,left top,left bottom,from(blue),to(red)); */ /* 二重渐变 从蓝色到白色渐变 再从黑色到红色渐变显示*/ /* background:-webkit-gradient(linear,left top,left bottom,from(blue),to(red),color-stop(0.5,#fff),color-stop(0.5,#000)); */ /* 多重渐变 先从蓝色到白色 再从白色到黑色 最后从褐色到红色*/ /* color-stop()函数包含两个参数值,第一个参数值指定色标的位置,第二个参数值指定色标的颜色,一个渐变可以包含多个色标,位置值为0-1之间的小数,或者0%-100%之间的百分数 指定色标的位置比例,用法与Photoshop中的渐变工具用法相似 */ background:-webkit-gradient(linear, left top, left bottom, from(blue),to(red), color-stop(0.4,#fff), color-stop(0.6,#000)); -webkit-background-origin:padding-box; -webkit-background-clip:content-box; } </style> </head> <body> <div></div> </body> </html>