渐变
- 指的是从一种颜色慢慢过渡到另外一种颜色
- 渐变必须加前缀。-webkit- -moz-
- 渐变只能用在background上面
渐变的语法结构
-
- background: -webkit-linear-gradient( [<起点> ||<角度>],点,点...)
-
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’,endColorstr=’#ff0000’,GradientType=’1’);
-
- 起点:从什么方向开始渐变,默认:top
- left,top,left top,right,right top,等等
- 角度: 从什么角度开始渐变
- xxx deg的形式(正数表示逆时针旋转。可以拿0deg最对比)
-
点: 渐变的颜色和位置
- black 50%位置可选
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>CSS3文本超出</title>
</head>
<style>
*{margin:0px;padding:0px;}
.box1{width:100px;height:100px;border:1px solid #ccc;background:-webkit-linear-gradient(left top,red 20px,blue 40px);} /*圆形*/
.box2{width:100px;height:100px;border:1px solid #ccc;background:-webkit-linear-gradient(30deg,red,green);}
.box3{width:100px;height:100px;border:1px solid #ccc;background:-webkit-linear-gradient(30deg,red 30px,green 50px);}
.box4{width:100px;height:100px;border:1px solid #ccc;background:-webkit-linear-gradient(30deg,red 20%,green 50%);}
</style>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
</body>
</html>
线性渐变实例
- 最简单
- red ,green
- 从上到下
.box2{width:100px;height:100px;border:1px solid #ccc;background:-webkit-linear-gradient(red,green);}
- 起点位置
- left top , red , green
- 30deg ,red, green
- 逆时针为正
.box1{width:100px;height:100px;border:1px solid #ccc;background:-webkit-linear-gradient(left top,red 20px,blue 40px);}
.box4{width:100px;height:100px;border:1px solid #ccc;background:-webkit-linear-gradient(30deg,red 20%,green 50%);}
- repeating-linear-gradient :表示重复渐变
.box3{width:100px;height:100px;border:1px solid #ccc;background:-webkit-repeating-linear-gradient(30deg,red 30px,green 50px);}
- 也可以配合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) no-repeat
简单例子鼠标放上去出现类似滚动的特效
渐变.gif
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>CSS3文本超出</title>
</head>
<style>
*{margin:0px;padding:0px;}
.box1{width:200px;height:30px;margin:50px auto;border:1px solid #ccc;background:-webkit-repeating-linear-gradient(-30deg,red 30px,green 50px);transition: 2s ;}
.box1:hover{background-position: 300px;}
</style>
<body>
<div class="box1">
</div>
</body>
</html>
线性渐变---IE兼容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变——IE兼容</title>
<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>
<div class="box"></div>
</body>
</html>
径向渐变(了解就好)
- radial-gradient(<起点>||<角度>,<形状>,点1,点2,....)
- 起点:可以是关键字(left,top,right,bottom),具体数值或百分比
- 形状 ellipse,circle
- 大小:具体数值或百分比也可以是关键字(最近端,最近角,最远端,最远角,包含或者覆盖)
- (closest-side,closest-corner,fathest-sice,farthest-corner,contain or cover)
- 特别注意火狐目前只支持关键字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>径向渐变</title>
<style>
.box {width: 300px; height: 300px; border: 1px solid #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>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
