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( [ ...
随机推荐
- gitlab-centos的安装
一:gitlab-CentOS的安装 1. 环境准备 1 [root@1-231 ~]# cat /etc/redhat-release 2 CentOS Linux release 7.4.170 ...
- (OK) Android内核（4.9）集成最新版MPTCP---成功
Android内核(4.9)集成最新版MPTCP---成功
- ABP vnext模块化架构的最佳实践的实现
在上一篇文章<手把手教你用Abp vnext构建API接口服务>中,我们用ABP vnext实现了WebAPI接口服务,但是并非ABP模块化架构的最佳实践.我本身也在学习ABP,我认为AB ...
- 多测师讲解接口测试 _面试题003_高级讲师肖sir
接口测试 一.你对HTTP有没有了解过?具体讲一下对http的了解.(答题思路: 定义.常见请求类型.状态码.请求头请求体.响应头和响应体.三次握手和四次挥手.)答:了解,我们做接口的时候基本上都是基 ...
- day05 Pyhton学习总结
1.字符串str s1="asasd",字符串不能修改 修改以后只能赋值给另一个变量 ret1=s1 1.切片 s1[0], s1[-1], s1[2:4], s1[-1:-4:- ...
- BUUCTF-[极客大挑战 2019]HardSQL 1详解
来到sql注入骚姿势,我们一点一点开始学 我们来到这道题,然后尝试注入,结果发现 拼接'or '1'='1 'or '1'='2如果是字符型注入则会报错,然而并没有而是显示的页面一样, 通过常规注入, ...
- git的一些操作命令
一,如何修改一个commit的注释? root@kubuntu:/data/git/clog# git commit --amend 说明:架构森林是一个专注架构的博客,地址:https://www. ...
- C# XML解析
摘自:http://www.cnblogs.com/RiseSoft/archive/2012/03/17/2404007.html 之前在项目中处理的都是一些小数据量的XML文件,都是直接用.Net ...
- Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互
引言 在与实现了语音合成.语义分析.机器翻译等算法的后端交互时,页面可以设计成更为人性化.亲切的方式.我们采用类似于聊天对话的实现,效果如下: 智能客服(输入文本,返回引擎处理后的文本结果) 语音合成 ...
- Ⅱ Finite Markov Decision Processes
Dictum: Is the true wisdom fortitude ambition. -- Napoleon 马尔可夫决策过程(Markov Decision Processes, MDPs ...