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"开头,后 ...
随机推荐
- Codeforces Round #333 (Div. 2) B. Approximating a Constant Range st 二分
B. Approximating a Constant Range Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com ...
- TC SRM 664 div2 B BearPlaysDiv2 bfs
BearPlaysDiv2 Problem Statement Limak is a little bear who loves to play. Today he is playing by ...
- C#程序实现动态调用DLL的研究[转]
摘 要: 在< csdn 开发高手> 2004 年第 03 期中的<化功大法——将 DLL 嵌入 EXE >一文,介绍了如何把一个动态链接库作为一个资源嵌入到可执行文件,在 ...
- 保存form配置信息INI
(* 功能:IniFormState1 保存和读取 窗体的大小2 保存和读取 窗体在屏幕上的位置//让程序第1次出现在屏幕的中心点获取屏幕的中心点POSITION:poScreenCenter //不 ...
- Android 4.1源码编译找不到资源文件解决办法
我们在Android framework中修改资源文件时,在Android 4.0之前,都是直接在sourcecode/frameworks/base/core/res/res下面添加对应的资源文件, ...
- 一起聊聊 Swift 3.0
Swift3.0将会给我们带来哪些改变: 1. 稳定二进制接口(ABI) ABI是什么呢?API大家都知道是应用程序接口 API只是提供函数签名 而ABI是系统和语言层面的 如果ABI稳定 意味着以后 ...
- ios开发——实用技术篇Swift篇&系统声音
系统声音 // MARK: - 系统声音 /*----- 系统声音 ------*/ @IBAction func systemSound() { //建立的SystemSoundID对象 var s ...
- Android Configuration change属性
问题:横竖屏切换时Activity的生命周期? 答案: 1.不设置Activity的android:configChanges时,切屏会重新调用各个生命周期,切横屏时会执行一次,切竖屏时会执行两次 2 ...
- ABAP FIELD-SYMBOLS 有大作用- 将没有可改参数的增强出口变得也能改主程序的值了
看下图代码: report z_xul_test2 中 定义了 全局变量 G_DATA1 , 分别调用了 z_xul_tes1 中的 form 和 function zbapi_test , 这两 ...
- xtrabackup原理1
http://www.cnblogs.com/Amaranthus/archive/2014/08/19/3922570.html Percona XtraBackup User Manual 阅读笔 ...