CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。

CSS3 定义了两种类型的渐变(gradients):

  • 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
  • 径向渐变(Radial Gradients)- 由它们的中心定义

浏览器支持

语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

第一个direction参数是方向,可以是left,right,top,bottom,left top,bottom right,to left,to left top 等这些方向名字

             也可以是角度,角度是指水平线和渐变线之间的角度,逆时针方向计算。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。

使用多个颜色结点

#grad1 {
height: 55px;
background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法(必须放在最后) */
}

CSS3 径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(原型或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)

语法

background: radial-gradient(center, shape size, start-color, ..., last-color);

径向渐变 - 颜色结点不均匀分布

#grad {
background: -webkit-radial-gradient(red %, green %, blue %); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red %, green %, blue %); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red %, green %, blue %); /* Firefox 3.6 - 15 */
background: radial-gradient(red %, green %, blue %); /* 标准的语法 */
}

设置形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。

#grad {
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
}

不同尺寸大小关键字的使用

#grad1 {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(% %, closest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(% %, closest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(% %, closest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */
background: radial-gradient(% %, closest-side,blue,green,yellow,black); /* 标准的语法(必须放在最后) */
} #grad2 {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(% %, farthest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(% %, farthest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(% %, farthest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */
background: radial-gradient(% %, farthest-side,blue,green,yellow,black); /* 标准的语法(必须放在最后) */
} #grad3 {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(% %, closest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(% %, closest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(% %, closest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */
background: radial-gradient(% %, closest-corner,blue,green,yellow,black); /* 标准的语法(必须放在最后) */
} #grad4 {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(% %, farthest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(% %, farthest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(% %, farthest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */
background: radial-gradient(% %, farthest-corner,blue,green,yellow,black); /* 标准的语法(必须放在最后) */
}

 

css3之 渐变的更多相关文章

  1. CSS3 Gradient 渐变

    转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...

  2. CSS3技巧:利用css3径向渐变做一张优惠券(转)

    在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...

  3. CSS3之渐变Gradient

    渐变是CSS3中比较好玩的属性,学会了渐变,那么可以做出非常炫的东东哟.CSS3 中渐变——Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). ...

  4. 【CSS3】使用CSS3线性渐变实现图片闪光划过效果(转)

    原文:http://www.nowamagic.net/librarys/veda/detail/2600 资料参考: http://www.cnblogs.com/lhb25/archive/201 ...

  5. CSS3背景渐变。。。

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 G ...

  6. 超多的CSS3圆角渐变网页按钮

    <!DOCTYPE html><head><title>超多的CSS3圆角渐变按钮</title><style type="text/c ...

  7. css3背景渐变以及图片混合渲染模式(一)

    一.CSS3 渐变(Gradients):CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(g ...

  8. CSS3 文字渐变动画

    背景剪裁 语法:background-clip: border-box || padding-box || context-box || no-clip || text 本次用到的就是: -webki ...

  9. 使用CSS3线性渐变实现图片闪光划过效果

    <p class="overimg"> <a><img src="http://www.nowamagic.net/librarys/ima ...

随机推荐

  1. tcp通信,解决断包、粘包的问题

    1.TCP和UDP的区别 TCP(transport control protocol,传输控制协议)是面向连接的,面向流的,提供高可靠性服务.收发两端(客户端和服务器端)都要有一一成对的socket ...

  2. <day002>Selenium基本操作+unittest测试框架

    任务1:Selenium基本操作 from selenium import webdriver # 通用选择 from selenium.webdriver.common.by import By # ...

  3. CSS三大特性之继承性

    1.并不是所有的属性都可以继承,只有以color/font/text/line开头的属性 才可以继承. 2.在CSS的继承中,不仅仅是儿子可以继承,只要是后代都可以继承. 3.继承中的特殊性 3.1  ...

  4. soj98 卡牌

    题意:一共有n张牌,每张牌有三个属性ai,bi,ci.问在属性上限为A,B,C的所有牌中有多少张牌满足至少有两个属性可以完全压制(严格大于)那n张牌? n<=50W. 标程: #include& ...

  5. Nginx的安装--------tar包安装

    Nginx的安装,在网上搜索是很多的结果,但是 真的安装起来却花费了不少 心思,总结起来就是依赖包安装了,但是没有指定对的路径,在安装的过程中遇到过两个问题: ①make[1]: *** [/usr/ ...

  6. 学习笔记 css样式

    大小 width:宽度  height:高度 背景 background-color  背景色   background-image  背景图片     background-repeat  背景平铺 ...

  7. csp-s模拟测试54x,y,z题解

    题面:https://www.cnblogs.com/Juve/articles/11606834.html x: 并差集,把不能分到两个集合里的元素和并到一起,设连通块个数为cnt,则答案为:$2^ ...

  8. 数论整除——cf1059D

    用map是卡着过去的..题解用vector+离散化后常数小了十倍.. 总之就是把所有模数给保存下来然后离散化,再去匹配一下即可,最后有个细节 自己的 #include<bits/stdc++.h ...

  9. 杂项-公司:AT&T

    ylbtech-杂项-公司:AT&T AT&T公司(英语:AT&T Inc.,原为American Telephone & Telegraph的缩写,也是中文译名美国电 ...

  10. Android开发随笔

    1.线性布局LinearLayout时,用到layout_weight权重的使用 控件的宽度(高度)=自身宽度(高度)+剩余空间的所占比例 剩余空间(可以为负值)=屏幕宽-所有控件宽度(高度)< ...