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. git使用具体介绍

    1. Git概念  1.1. Git库中由三部分组成         Git 仓库就是那个.git 文件夹,当中存放的是我们所提交的文档索引内容,Git 可基于文档索引内容对其所管理的文档进行内容追踪 ...

  2. Educational Codeforces Round 2 A. Extract Numbers 模拟题

    A. Extract Numbers Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/600/pr ...

  3. HDU 4821 String hash

    String Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view.action ...

  4. Spring的DataSource配置、将Hibernate配置所有写到Spring配置

    DataSource能够集中管理数据库连接,降低维护工作量,使部署更简单: Spring的DataSource配置:(Spring数据源配置)这里使用dbcp,还有非常多其它的如c3p0,jdbc,j ...

  5. C/C++程序猿必须熟练应用的开源项目

    作为一个经验丰富的C/C++程序猿, 肯定亲手写过各种功能的代码, 比方封装过数据库訪问的类, 封装过网络通信的类,封装过日志操作的类, 封装过文件訪问的类, 封装过UI界面库等, 也在实际的项目中应 ...

  6. js判断图片是否显示

    function getDefaultImg() { //添加判断图片是否存在操作 var $defaultImgPathObj = $('input[name=defaultImgPath]'); ...

  7. 开发者必备,超实用的PHP代码片段(转)

    此前,研发频道曾发布<直接拿来用,10个PHP代码片段>,得到了网友们的一致好评.本文,笔者将继续分享九个超级有用的PHP代码片段.当你在开发网站.应用或者博客时,利用这些代码能为你节省大 ...

  8. MYSQL 5.7 新增150多个新功能

    http://www.thecompletelistoffeatures.com/ There are over 150 new features in MySQL 5.7. The MySQL ma ...

  9. Spark on Yarn遇到的问题及解决思路

    原文:http://www.aboutyun.com/thread-9425-1-1.html 问题导读1.Connection Refused可能原因是什么?2.如何判断内存溢出,该如何解决?扩展: ...

  10. 你真的会用UITableView嘛

    UITableView是工程开发中最经常使用到的UI控件,但是你真的了解它嘛,这里记录几点有用的但你可能并不知道的. 当我们的数据未能显示满一屏幕的时候,UITableView会显示多余的横线,这个时 ...