css3 渐变实例
简单的渐变
<!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{
width: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{
width: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{
width: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>
