CSS3 线性渐变

语法

background: linear-gradient(directioncolor-stop1color-stop2, ...);
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>

使用角度

语法

background: linear-gradient(anglecolor-stop1color-stop2);

角度是指水平线和渐变线之间的角度,逆时针方向计算。换句话说,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(表示到最远的角落)。

语法

background: radial-gradient(center, shape size, start-color, ..., last-color);
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学习笔记之渐变的更多相关文章

  1. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  2. CSS3学习笔记之linear-gradient

    我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...

  3. 十天精通CSS3学习笔记 part1

    http://www.imooc.com/learn/33 第1章 初识CSS3 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主 ...

  4. CSS3学习笔记1-选择器和新增属性

    前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...

  5. HTML5+CSS3学习笔记(一)

    HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...

  6. 我的CSS3学习笔记

    1.元字符使用: []: 全部可选项 ||:并列 |:多选一 ?: 0个或者一个 *:0个或者多个 {}: 范围 2.CSS3属性选择器: E[attr]:存在attr属性即可: E[attr=val ...

  7. HTML5+CSS3学习笔记(一) 概述

    HTML5+CSS3概述      HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就 ...

  8. html5和css3学习笔记

    HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核; app(applicatin):应用; native app:原生的app sadsadsadad 单标签可以省略结尾标记 ...

  9. 十天精通CSS3学习笔记 part4

    CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...

随机推荐

  1. 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 ...

  2. TC SRM 664 div2 B BearPlaysDiv2 bfs

    BearPlaysDiv2 Problem Statement    Limak is a little bear who loves to play. Today he is playing by ...

  3. C#程序实现动态调用DLL的研究[转]

    摘   要: 在< csdn 开发高手> 2004 年第 03 期中的<化功大法——将 DLL 嵌入 EXE >一文,介绍了如何把一个动态链接库作为一个资源嵌入到可执行文件,在 ...

  4. 保存form配置信息INI

    (* 功能:IniFormState1 保存和读取 窗体的大小2 保存和读取 窗体在屏幕上的位置//让程序第1次出现在屏幕的中心点获取屏幕的中心点POSITION:poScreenCenter //不 ...

  5. Android 4.1源码编译找不到资源文件解决办法

    我们在Android framework中修改资源文件时,在Android 4.0之前,都是直接在sourcecode/frameworks/base/core/res/res下面添加对应的资源文件, ...

  6. 一起聊聊 Swift 3.0

    Swift3.0将会给我们带来哪些改变: 1. 稳定二进制接口(ABI) ABI是什么呢?API大家都知道是应用程序接口 API只是提供函数签名 而ABI是系统和语言层面的 如果ABI稳定 意味着以后 ...

  7. ios开发——实用技术篇Swift篇&系统声音

    系统声音 // MARK: - 系统声音 /*----- 系统声音 ------*/ @IBAction func systemSound() { //建立的SystemSoundID对象 var s ...

  8. Android Configuration change属性

    问题:横竖屏切换时Activity的生命周期? 答案: 1.不设置Activity的android:configChanges时,切屏会重新调用各个生命周期,切横屏时会执行一次,切竖屏时会执行两次 2 ...

  9. ABAP FIELD-SYMBOLS 有大作用- 将没有可改参数的增强出口变得也能改主程序的值了

    看下图代码: report  z_xul_test2 中 定义了 全局变量 G_DATA1 , 分别调用了 z_xul_tes1 中的 form  和 function zbapi_test , 这两 ...

  10. xtrabackup原理1

    http://www.cnblogs.com/Amaranthus/archive/2014/08/19/3922570.html Percona XtraBackup User Manual 阅读笔 ...