CSS3背景渐变。。。
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主要有 Mozilla(Firefox,Flock等)、WebKit(Safari、Chrome等)、Opera(Opera浏览器)、Trident(讨厌的IE浏览器)。
本文照常忽略IE不管,我们主要看看在 Mozilla、Webkit、Opera 下的应用,当然在 IE 下也可以实现,他需要通过 IE 特有的滤镜来实现,在后面会列出滤镜的使用语法,但不会具体介绍如何实用,感兴趣的可以搜索相关技术文档。
一、线性渐变在 Mozilla 下的应用
语法:
1
|
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
|
参数:其共有三个参数,第一个参数表示线性渐变的方向,top 是从上到下、left 是从左到右,如果定义成 left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。如图所示:
根据上面的介绍,我们先来看一个简单的例子:
HTML:
1
|
<div class= "example example1" ></div>
|
CSS:
1
2
3
4
|
.example {
width : 150px ;
height : 80px ;
}
|
如无特殊说明,我们后面的示例都是应用这一段 html 和 css 的基本代码。
现在我们给这个div应用一个简单的渐变样式:
1
2
3
|
.example 1 {
background : -moz-linear-gradient( top , #ccc , #000 );
}
|
效果如下:
二、线性渐变在 Webkit 下的应用
语法:
1
2
|
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则
|
参数:-webkit-gradient 是 webkit 引擎对渐变的实现参数,一共有五个。第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(径向渐变)。第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)和left bottom(左下角)。第四个和第五个参数,分别是两个color-stop函数。color-stop 函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。如图所示:
我们先来看一个老式的写法示例:
1
|
background : -webkit-gradient(linear, center top , center bottom ,from( #ccc ), to( #000 ));
|
效果如下所示:
接着我们在来看一下新式的写法:
1
|
-webkit-linear-gradient( top , #ccc , #000 );
|
这个效果我就不在贴出来了,大家在浏览器中一看就明白了,他们是否一致的效果。仔细对比,在 Mozilla 和 Webkit 下两者的学法都基本上一致了,只是其前缀的区别,当然哪一天他们能统一成一样,对我们来说当然是更好了,那就不用去处理了。将大大节省我们的开发时间哟。
三、线性渐变在 Opera 下的应用
语法:
1
|
-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */
|
参数:-o-linear-gradient 有三个参数。第一个参数表示线性渐变的方向,top 是从上到下、left 是从左到右,如果定义成 left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。(注:Opera 支持的版本有限,本例测试都是在 Opera11.1 版本下,后面不在提示),如图所示:
示例代码:
1
|
background : -o-linear-gradient( top , #ccc , #000 );
|
效果如图所示:
四、线性渐变在 Trident (IE) 下的应用
语法:
1
2
|
filter: progid:DXImageTransform.Microsoft.gradient(GradientType= 0 , startColorstr= #1471da , endColorstr= #1C85FB ); /*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)" ; /*IE8+*/
|
IE依靠滤镜实现渐变。startColorstr表示起点的颜色,endColorstr 表示终点颜色。GradientType 表示渐变类型,0 为缺省值,表示垂直渐变,1 表示水平渐变。如图所示:
上面我们主要介绍了线性渐变在上述四大核心模块下的实现方法,接着我们主要针对线性渐变在 Mozilla、Webkit、Opera 三大模块下实现各种不同线性渐变实例:
从上面的语法中我们可以很清楚的知道,要创建一个线性渐变,我们需要创建一个起点和一个渐变方向(或角度),定义一个起始色:
1
2
3
|
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
-o-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
|
具体应用如下:
1
2
3
4
|
background :-moz-linear-gradient( left , #ace , #f96 ); /*Mozilla*/
background :-webkit-gradient(linear, 0 50% , 100% 50% ,from( #ace ),to( #f96 )); /*Old gradient for webkit*/
background :-webkit-linear-gradient( left , #ace , #f96 ); /*new gradient for Webkit*/
background :-o-linear-gradient( left , #ace , #f96 ); /*Opera11*/
|
效果如下:
起始点(Starting Point)的工作方式类似于 background position。您可以设置水平和垂直位置为百分比,或以像素为单位,或在水平方向上可以使用left/center/right,在垂直方向上可以使用top/center/bottom。位置起始于左上角。如果你不指定水平或垂直位置,它将默认为center。其工作方式主要包含:Top → Bottom、Left → Right、bottom → top、right → left等,接着我们主要一种一种来看其实现的效果:
1、开始于center(水平方向)和top(垂直方向)也就是Top → Bottom:
1
2
3
4
5
6
7
8
9
|
/* Firefox 3.6+ */
background : -moz-linear-gradient( top , #ace , #f96 );
/* Safari 4-5, Chrome 1-9 */
/* -webkit-gradient(, [, ]?, [, ]? [, ]*) */
background : -webkit-gradient(linear, top ,from( #ace ),to( #f96 ));
/* Safari 5.1+, Chrome 10+ */
background : -webkit-linear-gradient( top , #ace , #f96 );
/* Opera 11.10+ */
background : -o-linear-gradient( top , #ace , #f96 );
|
效果:
2、始于left(水平方向)和center(垂直方向)也是就Left → Right:
1
2
3
4
5
6
|
/* Firefox 3.6+ */
background : -moz-linear-gradient( left , #ace , #f96 );
/* Safari 5.1+, Chrome 10+ */
background : -webkit-linear-gradient( left , #ace , #f96 );
/* Opera 11.10+ */
background : -o-linear-gradient( left , #ace , #f96 );
|
效果如下:
3、起始于left(水平方向)和top(垂直方向):
1
2
3
|
background : -moz-linear-gradient( left top , #ace , #f96 );
background : -webkit-linear-gradient( left top , #ace , #f96 );
background : -o-linear-gradient( left top , #ace , #f96 );
|
效果如下:
4、Linear Gradient (with Even Stops):
1
2
3
4
5
6
7
8
|
/* Firefox 3.6+ */
background : -moz-linear-gradient( left , #ace , #f96 , #ace , #f96 , #ace );
/* Safari 4-5, Chrome 1-9 */
background : -webkit-gradient(linear, left top , right top , from( #ace ), color-stop( 0.25 , #f96 ), color-stop( 0.5 , #ace ), color-stop( 0.75 , #f96 ), to( #ace ));
/* Safari 5.1+, Chrome 10+ */
background : -webkit-linear-gradient( left , #ace , #f96 , #ace , #f96 , #ace );
/* Opera 11.10+ */
background : -o-linear-gradient( left , #ace , #f96 , #ace , #f96 , #ace );
|
效果如下:
5、with Specified Arbitrary Stops:
1
2
3
4
5
6
7
8
|
/* Firefox 3.6+ */
background : -moz-linear-gradient( left , #ace , #f96 5% , #ace , #f96 95% , #ace );
/* Safari 4-5, Chrome 1-9 */
background : -webkit-gradient(linear, left top , right top , from( #ace ), color-stop( 0.05 , #f96 ), color-stop( 0.5 , #ace ), color-stop( 0.95 , #f96 ), to( #ace ));
/* Safari 5.1+, Chrome 10+ */
background : -webkit-linear-gradient( left , #ace , #f96 5% , #ace , #f96 95% , #ace );
/* Opera 11.10+ */
background : -o-linear-gradient( left , #ace , #f96 5% , #ace , #f96 95% , #ace );
|
效果如下:
6、角度(Angle):
正如上面看到的示例,如果您不指定一个角度,它会根据起始位置自动定义。如果你想更多的控制渐变的方向,您不妨设置角度试试。例如,下面的两个渐变具有相同的起点left center,但是加上一个30度的角度。
没有角度的示例代码:
1
2
3
|
background : -moz-linear-gradient( left , #ace , #f96 );
background : -webkit-linear-gradient( left , #ace , #f96 );
background : -o-linear-gradient( left , #ace , #f96 );
|
加上30度的角度代码:
1
2
3
|
background : -moz-linear-gradient( left 30 deg, #ace , #f96 );
background : -webkit-gradient(linear, 0 0 , 100% 100% , from( #ace ),to( #f96 ));
background : -o-linear-gradient( 30 deg, #ace , #f96 );
|
效果图如下:
当指定的角度,请记住,它是一个由水平线与渐变线产生的的角度,逆时针方向。因此,使用0deg将产生一个左到右横向梯度,而90度将创建一个从底部到顶部的垂直渐变。我来看看你核心代码:
1
2
3
4
|
background : -moz-linear-gradient(<angle>, #ace , #f96 );
background : -webkit-gradient(<type>,<angle>, from( #ace ), to( #f96 ));
background : -webkit-linear-gradient(<angle>, #ace , #f96 );
background : -o-linear-gradient(<angle>, #ace , #f96 );
|
我们来看看各角度的区别:
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
.deg 0 {
background : -moz-linear-gradient( 0 deg, #ace , #f96 );
background : -webkit-gradient(linear, 0 50% , 100% 50% ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 0 deg, #ace , #f96 );
background : -o-linear-gradient( 0 deg, #ace , #f96 );
}
.deg 45 {
background : -moz-linear-gradient( 45 deg, #ace , #f96 );
background : -webkit-gradient(linear, 0 100% , 100% 0% ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 45 deg, #ace , #f96 );
background : -o-linear-gradient( 45 deg, #ace , #f96 );
}
.deg 90 {
background : -moz-linear-gradient( 90 deg, #ace , #f96 );
background : -webkit-gradient(linear, 50% 100% , 50% 0% ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 90 deg, #ace , #f96 );
background : -o-linear-gradient( 90 deg, #ace , #f96 );
}
.deg 135 {
background : -moz-linear-gradient( 135 deg, #ace , #f96 );
background : -webkit-gradient(linear, 100% 100% , 0 0 ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 135 deg, #ace , #f96 );
background : -o-linear-gradient( 135 deg, #ace , #f96 );
}
.deg 180 {
background : -moz-linear-gradient( 180 deg, #ace , #f96 );
background : -webkit-gradient(linear, 100% 50% , 0 50% ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 180 deg, #ace , #f96 );
background : -o-linear-gradient( 180 deg, #ace , #f96 );
}
.deg 225 {
background : -moz-linear-gradient( 225 deg, #ace , #f96 );
background : -webkit-gradient(linear, 100% 0% , 0 100% ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 225 deg, #ace , #f96 );
background : -o-linear-gradient( 225 deg, #ace , #f96 );
}
.deg 270 {
background : -moz-linear-gradient( 270 deg, #ace , #f96 );
background : -webkit-gradient(linear, 50% 0% , 50% 100% ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 270 deg, #ace , #f96 );
background : -o-linear-gradient( 270 deg, #ace , #f96 );
}
.deg 315 {
background : -moz-linear-gradient( 315 deg, #ace , #f96 );
background : -webkit-gradient(linear, 0% 0% , 100% 100% ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 315 deg, #ace , #f96 );
background : -o-linear-gradient( 315 deg, #ace , #f96 );
}
.deg 360 {
background : -moz-linear-gradient( 360 deg, #ace , #f96 );
background : -webkit-gradient(linear, 0 50% , 100% 50% ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 360 deg, #ace , #f96 );
background : -o-linear-gradient( 360 deg, #ace , #f96 );
}
|
效果如下:
除了起始位置和角度,你应该指定起止颜色。起止颜色是沿着渐变线,将会在指定位置(以百分比或长度设定)含有指定颜色的点。色彩的起止数是无限的。如果您使用一个百分比位置,0%代表起点和100%是终点,但区域外的值可以被用来达到预期的效果。 这也是通过CSS3 Gradient制作渐变的一个关键所在,其直接影响了你的设计效果,像我们这里的示例都不是完美的效果,只是为了能给大家展示一个渐变的效果,大家就这样先用着吧。我们接着看一下不同的起址色的示例:
1
2
3
|
background : -moz-linear-gradient( top , #ace , #f96 80% , #f96 );
background : -webkit-linear-gradient( top , #ace , #f96 80% , #f96 );
background : -o-linear-gradient( top , #ace , #f96 80% , #f96 );
|
效果如下:
如果没有指定位置,颜色会均匀分布。如下面的示例:
1
2
3
|
background : -moz-linear-gradient( left , red , #f96 , yellow, green , #ace );
background : -webkit-linear-gradient( left , red , #f96 ,yellow, green , #ace );
background : -o-linear-gradient( left , red , #f96 , yellow, green , #ace );
|
效果如下
7、渐变上应用透明度(Transparency):
透明渐变对于制作一些特殊的效果是相当有用的,例如,当堆叠多个背景时。这里是两个背景的结合:一张图片,一个白色到透明的线性渐变。我们来看一个官网的示例吧:
1
2
3
|
background : -moz-linear-gradient( right , rgba( 255 , 255 , 255 , 0 ), rgba( 255 , 255 , 255 , 1 )), url (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
background : -webkit-linear-gradient( right , rgba( 255 , 255 , 255 , 0 ), rgba( 255 , 255 , 255 , 1 )), url (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
background : -o-linear-gradient( right , rgba( 255 , 255 , 255 , 0 ), rgba( 255 , 255 , 255 , 1 )), url (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
|
接着看看效果吧
大家可以时入这里和原图做一下比较,是不是很神奇呀。如果想体会的话,快点动手跟我一起做吧。
上面我们主要介绍了 CSS3 中线性渐变,下一篇文章将向大家介绍 CSS3 径向渐变,敬请期待 ……
转载于:https://www.cnblogs.com/nifengs/p/4856932.html
CSS3背景渐变。。。相关推荐
- css3背景渐变与边框阴影
一.盒子阴影和文字阴影 box-shadow: 盒子阴影 ie9 5个参数: 参数1:水平偏移量 +- 必选 ...
- CSS3背景渐变及文本效果
一.渐变 1.Linear Gradients-线性渐变 颜色沿着一条直线过渡:从左到右.从右到左.从上到下等 1.background: linear-gradient(position , col ...
- 背景渐变如何设置透明度
背景渐变如何设置透明度 项目最近这几天正在做不同主题的颜色配置方案,要根据用户输入的颜色来配置整个主题的颜色,让人头疼的是,其中一个主题所有的列表头部背景色都是2到3组渐变值的线性渐变,也就是说,要根 ...
- Css3: gradient背景渐变
Css3: gradient背景渐变 原文链接:http://kk073000.blog.163.com/blog/static/34826942012123111322691/ css3实现了背景渐 ...
- HTML中button怎么填充GIF,css3给按钮添加背景渐变动画
css3给按钮添加背景渐变动画 button { color:#FFF; font-size:16px; outline:none; width:300px; height:48px; backgro ...
- css3实现背景渐变的方法
我们一般实现背景渐变的方法都是用图片来实现,这段时间在做项目中找到了一种用css3用颜色实现背景渐变的方法,主要支持Firefox和Safari/Chrome 等浏览器,ie用滤镜的方法来解决渐变的问 ...
- css透明到渐变,css渐变(css3背景透明渐变)
竖向使这个div的颜色渐变,从red开始渐变到白色,请问怎么写css代码?最好. CSS3支持颜色渐变,但目前主流浏览器对CSS3支持都不完全,甚至不支持.所以你可以使用背景图片来做,你要竖向渐变,可 ...
- CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解 大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家 ...
- 按钮背景过渡css3,使用CSS3点击按钮实现背景渐变动画的效果
这篇文章给大家介绍的是,利用CSS3实现当点击按钮的时候,按钮的背景是渐变动画的效果,实现后的效果非常好,开发的时候利用这种效果的按钮会给用户一种非常酷炫的感受,感兴趣的朋友们下面来一起看看吧. 效果 ...
- css3 渐变背景 圆形,CSS 教程(5)-Css3-1,边框,背景,渐变,
1.CSS3 边框 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop 在 CSS3 中 border-radius 属性被用于创建圆角 div { ...
最新文章
- Codeforces 1176F
- 【Java中级篇】Dom4j解析xml数据
- 普通公司员工的编程水平与阿里巴巴有多大差距?
- ASP.NET MVC 中@Html.Partial,@Html.Action,@Html.RenderPartial,@Html.RenderAction
- 待支付取件费用是什么意思_SEDEX验厂是什么意思,sedex验厂审核费用是多少?...
- MySQL5.7重置root密码
- JVisualVM 简介
- XX 公司网络信息系统的安全方案设计书
- 数据包络(DEA)分析法python实现
- 智能AI文章伪原创工具免费使用注意事项与推荐
- 任正非带领华为三分天下的7大杀招
- Windows 10 系统更新后 vagrant up 报错:Error opening VBoxDrvStub: STATUS_OBJECT_NAME_NOT_FOUND
- 小型元器件介绍:排阻
- 万洲金业平台上炒黄金亏损了怎么办?
- 《大明王朝1566》台词摘录
- 拒退10万保证金 哈啰杨磊被限制消费 公司回应正在申请解除
- Typora都开始收费了,不会有人还没用过吧
- URL中的特殊格式进行转换
- pyqt制作简单的摄像头监控界面
- oracle add_months()函数
热门文章
- bootstrap4 图标和文字行内对齐
- 区块链 什么是RLP编码
- hashmap7源码浅析及与hashmap8的比较
- 基于Java的汽车租赁系统
- php之图片上传到服务器的原理
- JavaScript基础知识指南-思维导图
- 关于点击锁(防止多次点击)
- Spring Boot 2.x 自定义数据源 DruidDataSource(操作 mysql 数据库)
- 基于决策树的保险案列
- 阶段3 3.SpringMVC·_01.SpringMVC概述及入门案例_09.RequestMapping注解的属性