快捷导航
蚂蚁部落 网站首页 前端教程 CSS3教程 查看内容

栏目导航

≡文本≡

≡颜色≡

≡单位≡

≡渐变≡

≡边框≡

≡背景≡

≡transform变换≡

≡transition过渡≡

≡animation动画≡

≡column多列布局≡

≡flex弹性布局≡

≡其他≡

CSS3 linear-gradient()线性渐变

2017-12-20 02:00| 发布者: admin| 查看: 451| 评论: 0|来自: 蚂蚁部落

linear-gradient()用来定义线性渐变。

径向渐变可以参阅CSS3 radial-gradient()径向渐变一章节。

当前最新的线性渐变的语法基本一致(浏览器还有一些比较老的语法结构,下面会介绍)。

语法结构:

[CSS] 纯文本查看 复制代码
linear-gradient([ [ [<angle> | to [top | bottom] || [left | right] ],]? <color-stop>[,<color-stop>]+)

参数解析:

(1). [<point> || <angle>,]:可选,用来规定线性渐变的方向;angle规定一个角度,后面有介绍。left、top、right或者bottom,也可以是它们的适当组合。全部可能的值:to left, to right, to top, to bottom, to left top, to left bottom, to right top, to right bottom;分别表示渐变从左往右,从右往左,从上往下,以此类推。

(2).<stop>:必需,第二个和第三个参数分别是渐变起始点颜色和渐变结束点颜色,当然可以在它们之间插入更多的参数,表示多种颜色渐变。

线性渐变语法格式有多个版本,举一个例子:

[CSS] 纯文本查看 复制代码
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

一切事物都要与时俱进,本文已抛弃这种语法结构,感兴趣的朋友可以自己查阅一下。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">
div{
  width:150px;
  height:80px;
  margin:20px;
}
.left{
  background:linear-gradient(to left, red,blue);
}
.top{
  background:linear-gradient(to top, red,blue);
}
.lefTop{
  background:linear-gradient(to left top, red,blue);
}
.more{
  background:linear-gradient(to left, red, blue,green);
}
</style>
</head>
<body>
<div class="left"></div>
<div class="top"></div>
<div class="lefTop"></div>
<div class="more"></div>
</body>
</html>

上面的代码对于线性渐变的基本用法做了一下演示,非常的简单,下面我们继续深入介绍。

前面的演示,都没有指定颜色的位置,所以渐变是平均分布的,其实我们可以控制渐变的区域。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">
div{
  width:150px;
  height:80px;
  margin:20px;
}
.antzone{
  background:linear-gradient(to left, red 80%, blue);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>

上面的代码就规定了渐变的范围,从80%开始进行渐变动作,由于第二个颜色没有规定,那么渐变结束位置就是100%。也就是说80%之前的位置是实色没有渐变效果,80%-100%之间的区域是渐变的。再来看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">
div{
  width:150px;
  height:80px;
  margin:20px;
}
.antzone{
  background:linear-gradient(to left, red 30%, blue 80% );
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>

上面的代码中就是规定30%-80%之间的区域为渐变区域,其他地方为实色。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">
div{
  width:150px;
  height:80px;
  margin:20px;
}
.antzone{
  background:linear-gradient(to right, red 80%, blue 70% );
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>

如果其实渐变色的color-stop大于结束渐变色的color-stop,那么以实色显示,很容易理解,不多介绍。

关于angle角度的使用:

关于此知识点具体参阅CSS3 倾斜角度线性渐变一章节。

透明度的应用:

线性渐变也可以应用于透明度上,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset="gb2312"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">
div{
  width:350px;
  height:180px;
  margin:20px;
}
.antzone{
  background:linear-gradient(to left,rgba(255,255,255,0),rgba(255,255,255,1)),
    url(mytest/demo/girl.jpg);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>

鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-1-19 09:15 , Processed in 0.092995 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部