css3学习笔记之渐变
CSS3 线性渐变
语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html> < html > < head > < style > #grad1 { height: 200px; background: linear-gradient(red, blue); /* 标准的语法(必须放在最后) */ } </ style > </ head > < body > < h3 >线性渐变 - 从上到下</ h3 > < p >从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色:</ p > < div id = "grad1" ></ div > < p >< strong >注意:</ strong > Internet Explorer 9 及之前的版本不支持渐变。</ p > </ body > </ html > |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html> < html > < head > < style > #grad1 { height: 200px; 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); /* 标准的语法(必须放在最后) */ } </ style > </ head > < body > < h3 >线性渐变 - 从左到右</ h3 > < p >从左边开始的线性渐变。起点是红色,慢慢过渡到蓝色:</ p > < div id = "grad1" ></ div > < p >< strong >注意:</ strong > Internet Explorer 9 及之前的版本不支持渐变。</ p > </ body > </ html > |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html> < html > < head > < style > #grad1 { height: 200px; background: linear-gradient( to bottom right , red , orange,yellow); /* 标准的语法(必须放在最后) */ } </ style > </ head > < body > < h3 >线性渐变 - 对角</ h3 > < p >从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到蓝色:</ p > < div id = "grad1" ></ div > < p >< strong >注意:</ strong > Internet Explorer 9 及之前的版本不支持渐变。</ p > </ body > </ html > |
使用角度
语法
角度是指水平线和渐变线之间的角度,逆时针方向计算。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。
但是,请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准,即 0deg 将创建一个从左到右的渐变,90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度,y为非标准角度。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html> < html > < head > < style > #grad1 { height: 100px; background: linear-gradient(0deg, red, blue); /* 标准的语法(必须放在最后) */ } #grad2 { height: 100px; background: linear-gradient(90deg, red, blue); /* 标准的语法(必须放在最后) */ } #grad3 { height: 100px; background: linear-gradient(180deg, red, blue); /* 标准的语法(必须放在最后) */ } #grad4 { height: 100px; background: linear-gradient(-90deg, red, blue); /* 标准的语法(必须放在最后) */ } </ style > </ head > < body > < h3 >线性渐变 - 使用不同的角度</ h3 > < div id = "grad1" style = "color:white;text-align:center;" >0deg</ div >< br > < div id = "grad2" style = "color:white;text-align:center;" >90deg</ div >< br > < div id = "grad3" style = "color:white;text-align:center;" >180deg</ div >< br > < div id = "grad4" style = "color:white;text-align:center;" >-90deg</ div > < p >< strong >注意:</ strong > Internet Explorer 9 及之前的版本不支持渐变。</ p > </ body > </ html > |
使用透明度(Transparency)
CSS3 渐变也支持透明度(transparency),可用于创建减弱变淡的效果。
为了添加透明度,我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html> < html > < head > < style > #grad1 { height: 200px; background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法(必须放在最后) */ } </ style > </ head > < body > < h3 >线性渐变 - 透明度</ h3 > < p >为了添加透明度,我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。</ p > < div id = "grad1" ></ div > < p >< strong >注意:</ strong > Internet Explorer 9 及之前的版本不支持渐变。</ p > </ body > </ html > |
重复的线性渐变
repeating-linear-gradient() 函数用于重复线性渐变:
CSS3 径向渐变
径向渐变由它的中心定义。
为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(原型或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。
语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html> < html > < head > < style > #grad1 { height: 150px; width: 200px; background: radial-gradient(yellow,red, yellow,orange, yellow); /* 标准的语法(必须放在最后) */ } </ style > </ head > < body > < h3 >径向渐变 - 颜色结点均匀分布</ h3 > < div id = "grad1" ></ div > < p >< strong >注意:</ strong > Internet Explorer 9 及之前的版本不支持渐变。</ p > </ body > </ html > |
设置形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html> < html > < head > < style > #grad1 { height: 150px; width: 200px; background: radial-gradient(ellipse,red, yellow, green); /* 标准的语法(必须放在最后) */ } #grad2 { height: 150px; width: 200px; background: radial-gradient(circle, red, yellow, green); /* 标准的语法(必须放在最后) */ } </ style > </ head > < body > < h3 >径向渐变 - 形状</ h3 > < p >< strong >椭圆形 Ellipse(默认):</ strong ></ p > < div id = "grad1" ></ div > < p >< strong >圆形 Circle:</ strong ></ p > < div id = "grad2" ></ div > < p >< strong >注意:</ strong > Internet Explorer 9 及之前的版本不支持渐变。</ p > </ body > </ html > |
css3学习笔记之渐变的更多相关文章
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- CSS3学习笔记之linear-gradient
我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...
- 十天精通CSS3学习笔记 part1
http://www.imooc.com/learn/33 第1章 初识CSS3 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主 ...
- CSS3学习笔记1-选择器和新增属性
前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...
- HTML5+CSS3学习笔记(一)
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...
- 我的CSS3学习笔记
1.元字符使用: []: 全部可选项 ||:并列 |:多选一 ?: 0个或者一个 *:0个或者多个 {}: 范围 2.CSS3属性选择器: E[attr]:存在attr属性即可: E[attr=val ...
- HTML5+CSS3学习笔记(一) 概述
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就 ...
- html5和css3学习笔记
HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核; app(applicatin):应用; native app:原生的app sadsadsadad 单标签可以省略结尾标记 ...
- 十天精通CSS3学习笔记 part4
CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...
随机推荐
- git使用具体介绍
1. Git概念 1.1. Git库中由三部分组成 Git 仓库就是那个.git 文件夹,当中存放的是我们所提交的文档索引内容,Git 可基于文档索引内容对其所管理的文档进行内容追踪 ...
- Educational Codeforces Round 2 A. Extract Numbers 模拟题
A. Extract Numbers Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/600/pr ...
- HDU 4821 String hash
String Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view.action ...
- Spring的DataSource配置、将Hibernate配置所有写到Spring配置
DataSource能够集中管理数据库连接,降低维护工作量,使部署更简单: Spring的DataSource配置:(Spring数据源配置)这里使用dbcp,还有非常多其它的如c3p0,jdbc,j ...
- C/C++程序猿必须熟练应用的开源项目
作为一个经验丰富的C/C++程序猿, 肯定亲手写过各种功能的代码, 比方封装过数据库訪问的类, 封装过网络通信的类,封装过日志操作的类, 封装过文件訪问的类, 封装过UI界面库等, 也在实际的项目中应 ...
- js判断图片是否显示
function getDefaultImg() { //添加判断图片是否存在操作 var $defaultImgPathObj = $('input[name=defaultImgPath]'); ...
- 开发者必备,超实用的PHP代码片段(转)
此前,研发频道曾发布<直接拿来用,10个PHP代码片段>,得到了网友们的一致好评.本文,笔者将继续分享九个超级有用的PHP代码片段.当你在开发网站.应用或者博客时,利用这些代码能为你节省大 ...
- MYSQL 5.7 新增150多个新功能
http://www.thecompletelistoffeatures.com/ There are over 150 new features in MySQL 5.7. The MySQL ma ...
- Spark on Yarn遇到的问题及解决思路
原文:http://www.aboutyun.com/thread-9425-1-1.html 问题导读1.Connection Refused可能原因是什么?2.如何判断内存溢出,该如何解决?扩展: ...
- 你真的会用UITableView嘛
UITableView是工程开发中最经常使用到的UI控件,但是你真的了解它嘛,这里记录几点有用的但你可能并不知道的. 当我们的数据未能显示满一屏幕的时候,UITableView会显示多余的横线,这个时 ...