标签：
渐变
一、 线性渐变
1 线性渐变格式
linear-gradient([<起点> || <角度>,]? <点>, <点>…)
只能用在背景上
2 IE filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#ffffff‘,endColorstr=‘#ff0000‘,GradientType=‘1‘);
<style>
.box{width:300px;height:300px;background:-webkit-linear-gradient(red,blue);background:-moz-linear-gradient(red,blue);background:linear-gradient(red,blue);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘red‘,endColorstr=‘blue‘,GradientType=‘0‘);}
</style>
</head>
<body>
<divclass="box"></div>
</body>
3 参数
起点：从什么方向开始渐变 默认：top
left、top、left top
从上到下
<style>
.box{width:300px;height:300px;border:10pxsolid #000; background-image:-webkit-linear-gradient(red,blue);}
</style>
</head>
<body>
<divclass="box"></div>
</body>
角度：从什么角度开始渐变
xxx deg的形式
逆时针
.box{width:300px;height:300px;border:10pxsolid #000; background-image:-webkit-linear-gradient(60deg,red,blue);}
</style>
</head>
<body>
<divclass="box"></div>
</body>
点：渐变点的颜色和位置
black 50%，位置可选
<style>
.box{width:300px;height:300px;border:10pxsolid #000; background-image:-webkit-linear-gradient(60deg,red,blue,yellow,blue);}
</style>
</head>
<body>
<divclass="box"></div>
</body>
<style>
.box{width:300px;height:300px;border:10pxsolid #000; background-image:-webkit-linear-gradient(60deg,red0,blue 50%,green 100%);}
</style>
</head>
<body>
<divclass="box"></div>
</body>
4 repeating-linear-gradient
<style>
.box{width:300px;height:300px;border:10pxsolid #000; background-image:-webkit-repeating-linear-gradient(60deg,red0,blue 30px);}
</style>
</head>
<body>
<divclass="box"></div>
</body>
5 线性渐变实例
加入点的位置
top, red 40%,green 60%
top, red 50%,green 50%
同一个位置两个点——直接跳变
也可以用px
配合rgba
top,rgba(255,255,255,1), rgba(255,255,255,0)
加入背景图片
background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%,rgba(255,255,255,0)), url(a.gif)
6 实例1：进度条
<style>
.wrap{width:200px;height:30px;overflow:hidden;border:1pxsolid #000;}
.box{width:400px;height:30px;background:-webkit-repeating-linear-gradient(15deg,green0,green 10px,#fff 10px,#fff 20px); transition:3s;}
.wrap:hover .box{margin-left:-100px;}
</style>
</head>
<body>
<divclass="wrap">
<divclass="box"></div>
</div>
</body>
鼠标移上，向左运动，实现类似进度条的效果
7 实例2：百度音乐图片光影效果
1.
<style>
.box{width:300px;height:300px;background:-webkit-linear-gradient(-30deg,rgba(255,255,255,0)0,rgba(255,255,255,0) 150px,rgba(255,255,255,1) 170px,rgba(255,255,255,1)180px,rgba(255,255,255,0) 210px) no-repeat,url(new_bg.png) no-repeat;transition:1s;}
</style>
</head>
<body>
<divclass="box"></div>
</body>
2.
鼠标移上，运动起来
<style>
.box{width:300px;height:300px;background:-webkit-linear-gradient(-30deg,rgba(255,255,255,0)0,rgba(255,255,255,0) 150px,rgba(255,255,255,1) 170px,rgba(255,255,255,1)180px,rgba(255,255,255,0) 210px) no-repeat -200px 0,url(new_bg.png)no-repeat; transition:1s;}
.box:hover{background-position:300px0,-100px -100px;}
</style>
</head>
<body>
<divclass="box"></div>
</body>
二、 径向渐变
radial-gradient([<起点>]? [<形状> || <大小>,]? <点>, <点>…);
起点：可以是关键字（left,top,right,bottom），具体数值或百分比
形状： ellipse、circle
大小 :具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner,farthest-side, farthest-corner, contain or cover)）;
注意firefox目前只支持关键字
<style>
.box{width:200px;height:200px;background:-webkit-radial-gradient(red,blue);}
</style>
</head>
<body>
<divclass="box"></div>
</body>
<style>
.box{width:200px;height:200px;background:-webkit-radial-gradient(100px50px,red,blue);}
</style>
</head>
<body>
<divclass="box"></div>
</body>
<style>
.box{width:200px;height:200px;background:-webkit-radial-gradient(100px50px,circle,red,blue);}
</style>
</head>
<body>
<divclass="box"></div>
</body>
<style>
.box{width:200px;height:200px;background:-webkit-radial-gradient(100px50px,100px 20px,red,blue);background:-moz-radial-gradient(100px50px,red,blue);}
</style>
</head>
<body>
<divclass="box"></div>
</body>
径向渐变的关键字
<style>
.box{width:300px;height:300px;border:1pxsolid #000;float:left;margin:10px;}
.box:nth-child(1){background:-webkit-radial-gradient(100px 50px,closest-side,red,blue);}
.box:nth-child(2){background:-webkit-radial-gradient(100px 50px,closest-corner,red,blue);}
.box:nth-child(3){background:-webkit-radial-gradient(100px 50px,farthest-side,red,blue);}
.box:nth-child(4){background:-webkit-radial-gradient(100px 50px,farthest-corner,red,blue);}
.box:nth-child(5){background:-webkit-radial-gradient(100px 50px,contain ,red,blue);}
.box:nth-child(6){background:-webkit-radial-gradient(100px 50px,cover ,red,blue);}
</style>
</head>
<body>
<divclass="box"></div>
<divclass="box"></div>
<divclass="box"></div>
<divclass="box"></div>
<divclass="box"></div>
<divclass="box"></div>
</body>
标签：
原文地址：http://blog.csdn.net/u013267266/article/details/51134335
