css3 渐变实例

最新推荐文章于 2024-06-20 11:21:40 发布

转载最新推荐文章于 2024-06-20 11:21:40 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mingjixiaohui/p/5368843.html

文章标签：

#photoshop

简单的渐变

<!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>

转载于:https://www.cnblogs.com/mingjixiaohui/p/5368843.html