CSS3之线性渐变（linear gradients）
线性渐变(linear gradients)沿着一根轴线改变颜色，从起点到终点颜色进行顺序渐变。
语法：
background:linear-gradient(direction,color-stop1,color-stop2,……);
1、线性渐变从上到下(默认)
语法
background:linear-gradient(color-stop1,color-stop2……);
实例
div {
width: 800px;
height: 500px;
margin: 0 auto;
background: -webkit-linear-gradient(red, blue);
/* Safari 5.1 - 6.0*/
background: -o-linear-gradient(red, blue);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue);
/* Firefox 3.6 - 15 */
background: linear-gradient(red, blue);
/* 标准的语法 */
}
2、线性渐变从左到右
语法：
background: -webkit-linear-gradient(begin-level begin-vertical,color-stop1,color-stop2,……);
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(end-level end-vertical,color-stop1,color-stop2,……);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(end-level end-vertical,color-stop1,color-stop2,……);
/* Firefox 3.6 - 15 */
background: linear-gradient(to end-level end-vertical,color-stop1,color-stop2,……);
/*标准的语法*/
实例
div {
width: 800px;
height: 500px;
margin: 0 auto;
background: -webkit-linear-gradient(left, red, blue);
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue);
/* Firefox 3.6 - 15 */
background: linear-gradient(to right, red, blue);
/* 标准的语法 */
}
3、线性渐变对角
语法
background: -webkit-linear-gradient(begin-level begin-vertical,color-stop1,color-stop2,……);
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(end-level end-vertical,color-stop1,color-stop2,……);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(end-level end-vertical,color-stop1,color-stop2,……);
/* Firefox 3.6 - 15 */
background: linear-gradient(to end-level end-vertical,color-stop1,color-stop2,……);
/*标准的语法*/
小提示：线性渐变对角时关键字的顺序无关紧要，“to left bottom”与“to bottom left”相同。
实例
div {
width: 800px;
height: 500px;
margin: 0 auto;
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}
3-3编程练习
小伙伴们，我们学习了怎样使用CSS3写颜色的渐变效果，那么根据效果图，写出代码，实现3中方式的渐变把!
效果图如下：
任务
第一步：写出html代码(3个div元素)
第二部：给div元素设置CSS样式(宽和高。三个元素在一行上)
第三部：给三个div元素设置相应的背景颜色
(1)第一个div元素是从上向下发生渐变，暗色由黄色变成红色
(2)第二个div元素是从左到右发生渐变，颜色由黄色变为红色
第三个div元素是从左上角到右下角发生渐变，颜色由红色变为黄色
参考代码：
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<title>background-clip</title>
<meta name='description' content='background-clip'>
<meta name='keywords' content='background-clip'>
<style>
/* 此处写代码 */
html,
body {
margin: 0;
padding: 0; } .container {
width: 1000px;
margin: 20px auto;
display: flex;
justify-content: space-between;
}
.font{
display:flex;
justify-content:center;
width: 200px; } div.item{
width: 200px;
height: 200px;
background: #ccc;
} div.item:nth-child(1) {
background: linear-gradient(yellow, red); } div.item:nth-child(2) {
background: linear-gradient(to right,yellow, red); }
div.item:nth-child(3) {
background: linear-gradient(to bottom right, red,yellow); }
</style> </head> <body>
<!-- 此处写代码 --> <div class='container'>
<div class='font'>上下方向渐变</div>
<div class='font'>左右方向渐变</div>
<div class='font'>对角线方向渐变</div>
</div>
<div class='container'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
</body> </html>
4、线性渐变-使用角度
语法：
background:linear-gradient(angle,color-stop1,color-stop2,……);
角度说明
0deg创建一个从下到上的渐变，正角表示顺时针旋转，90deg创建一个从左到右的渐变。
实例
#grad {
background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(180deg, red, blue); /* 标准的语法 */
}
编程练习
小伙伴们，根据效果图，补充代码，实现元素的背景颜色在水平方向上发生渐变，其中：
(1)0%-20%处，颜色是红色全透明
(2)20%-50%处，颜色是从白色渐变到红色
(3)50%-90%处，颜色从红色渐变到绿色，其中绿色的透明度是0.7
效果图如下：
任务
给元素设置背景颜色渐变
(1)用角度表示法让颜色在水平方向发生渐变
(2)水平方向的0%-20%处，渐变的颜色是红色全透明
(3)水平方向的20%-50%处，渐变的颜色是红色，颜色没有透明度
(4)水平方向50%-90%处，渐变的颜色是绿色，透明度为0.7
参考代码：
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<title>em</title>
<meta name='description' content='em'>
<meta name='keywords' content='em'>
<style>
/* 此处写代码 */
div {
width: 400px;
height: 400px;
border:1px solid red;
background:linear-gradient(90deg,rgba(255, 0, 0,0) 20%,rgba(255, 0, 0,1) 50%,rgba(0,255,0,0.7) 90%);
margin:0 auto;
}
</style> </head> <body>
<!-- 此处写代码 -->
<div></div> </body> </html>
5、线性渐变-重复渐变
语法：
background:repeating-linear-gradient(color1 length|percentage,color2 length|percentage,……);
实例
div {
background:repeating-linear-gradient(red,blue 20%);
}
3-9编程练习
小伙伴们，我们学习了CSS3现象渐变中的重复渐变，接下来，根据效果图补充代码，实现元素中多个彩虹的重复。
提示：彩虹的颜色，用英语单词表达即可
效果图如下
任务
给元素设置背景颜色重复渐变
(1)效果图中的完整彩虹重复了最少3次，占据了元素的90%的位置，所以一个彩虹占据元素的比例是30%
(2)将一个彩虹的7个颜色，均摊到30%中，每个颜色的比重是5%，比如红色占据的位置是0%，橙色占据的是5%，黄色占据的是10%，以此类推。
参考代码：
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<title>em</title>
<meta name='description' content='em'>
<meta name='keywords' content='em'>
<style>
/* 此处写代码 */
div {
width: 400px;
height: 300px;
border:1px solid red;
background:repeating-linear-gradient(90deg,red 0%,orange 5%,yellow 10%,green 15%,blue 20%,indigo 25%,purple 30%);
margin:0 auto;
}
</style> </head> <body>
<!-- 此处写代码 -->
<div></div> </body> </html>
CSS3之线性渐变（linear gradients）的更多相关文章
- CSS3 linear-gradient线性渐变实现虚线等简单实用图形
一.作为图片存在的CSS3 gradient渐变 我觉得CSS3 Backgrounds比较厉害的一个地方就是支持多背景,也就是背景图片个数可以无限累加,正好CSS3的gradient渐变性质是bac ...
- CSS3 Gradient线性渐变
废话小说,看代码 <!DOCTYPE html > <html > <head> <meta charset="utf-8"> &l ...
- CSS3的线性渐变（linear-gradient）
CSS3渐变(gradient)可分为线性渐变(linear-gradient)和径向渐变(radial-gradient).今天给大家说一说线性渐变. 以webkit内核浏览器为例, 语法: div ...
- CSS3———linear-gradient() 线性渐变
线性渐变linear-gradient() 遇到了这样的css样式 body { height: 100%; background-color: #ffffff; background-image: ...
- 【CSS3】 线性渐变
参考地址:http://www.w3cplus.com/css3/new-css3-linear-gradient.html background-image: linear-gradient(to ...
- CSS3渐变(Gradients)-线性渐变
CSS3渐变(Gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度. 以前,你必须使用图像来实现这些效果.但是,通过Css3渐变(Gradients),你可以减少下载的事件和 ...
- CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). 为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器 ...
- 再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- CSS3线性渐变linear-gradient
转自 http://www.w3cplus.com/content/css3-gradient CSS3的线性渐变 一.线性渐变在Mozilla下的应用 -moz-linear-gradient( [ ...
随机推荐
- ORM查询相关的操作
必知必会13条 import os os.environ.setdefault("DJANGO_SETTINGS_MODULE", "orm_practice.setti ...
- 资源管理神器Clover
开开心心地上班,这时你得打开我的电脑,点进D盘,打开某个项目;然后还得打开XX文档,还有.... 最后的最后,你的桌面便成了这个样子 每天你都得天打开多个文件夹,切换时找文件找的晕头转向而烦恼. 每天 ...
- C语言从1打印到100再打印到1该如何编写？我只服最后一种写法！
我觉得这是一个送分题,奈何人才太多了,给出了各种古怪的写法,如果是做项目的话,我比骄建议一些正常的写法,就是大家都能看得懂的,不要搞什么花里胡哨,不过你要是交流的话,既然是交流,我不觉得要多正规,即使 ...
- 经验分享：Windows10值得推荐的软件，总有一款是你的菜
今天在知乎上看到有人分享wids10推荐好用的软件:今天小编做了一点点的修改和根据自己的使用情况总结出来转发分享给大家: 1.安全放病毒--火绒[推荐] 2.办公软件--office2019[推荐 ...
- 【图论】USACO11JAN Roads and Planes G
题目内容 洛谷链接 Farmer John正在一个新的销售区域对他的牛奶销售方案进行调查.他想把牛奶送到\(T\)个城镇 (\(1 <= T <= 25,000\)),编号为\(1\)到\ ...
- go 多协程爬取图片
package main import ( "fmt" "github.com/antchfx/htmlquery" "golang.org/x/ne ...
- linux(centos8):阿里云ecs配置smtps发邮件(解决不能通过25端口发邮件问题)
一,2016年9月后购买的阿里云ecs不再支持通过25端口发送邮件 官方的建议是使用465端口 465端口(SMTPS): 465端口是为SMTPS(SMTP-over-SSL)协议服务开放的 它是S ...
- linux下composer安装
curl -sS https://getcomposer.org/installer | php mv composer.phar /usr/local/bin/composer执行更新compose ...
- Groovy中如何向已有的类添加新方法
Groovy 中有多种途径实现向原有类添加方法,具体有如下几种: MOP(meta object protocol) -- 详见 ExpandoMetaClass 扩展方法 -- GDK采用的此方法 ...
- JAVA中Object类方法详解
一.引言 Object是java所有类的基类,是整个类继承结构的顶端,也是最抽象的一个类.大家天天都在使用toString().equals().hashCode().waite().notify() ...