css3之 渐变
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之 渐变的更多相关文章
- CSS3 Gradient 渐变
转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...
- CSS3技巧:利用css3径向渐变做一张优惠券(转)
在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...
- CSS3之渐变Gradient
渐变是CSS3中比较好玩的属性,学会了渐变,那么可以做出非常炫的东东哟.CSS3 中渐变——Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). ...
- 【CSS3】使用CSS3线性渐变实现图片闪光划过效果(转)
原文:http://www.nowamagic.net/librarys/veda/detail/2600 资料参考: http://www.cnblogs.com/lhb25/archive/201 ...
- CSS3背景渐变。。。
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 G ...
- 超多的CSS3圆角渐变网页按钮
<!DOCTYPE html><head><title>超多的CSS3圆角渐变按钮</title><style type="text/c ...
- css3背景渐变以及图片混合渲染模式(一)
一.CSS3 渐变(Gradients):CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(g ...
- CSS3 文字渐变动画
背景剪裁 语法:background-clip: border-box || padding-box || context-box || no-clip || text 本次用到的就是: -webki ...
- 使用CSS3线性渐变实现图片闪光划过效果
<p class="overimg"> <a><img src="http://www.nowamagic.net/librarys/ima ...
随机推荐
- tcp通信,解决断包、粘包的问题
1.TCP和UDP的区别 TCP(transport control protocol,传输控制协议)是面向连接的,面向流的,提供高可靠性服务.收发两端(客户端和服务器端)都要有一一成对的socket ...
- <day002>Selenium基本操作+unittest测试框架
任务1:Selenium基本操作 from selenium import webdriver # 通用选择 from selenium.webdriver.common.by import By # ...
- CSS三大特性之继承性
1.并不是所有的属性都可以继承,只有以color/font/text/line开头的属性 才可以继承. 2.在CSS的继承中,不仅仅是儿子可以继承,只要是后代都可以继承. 3.继承中的特殊性 3.1 ...
- soj98 卡牌
题意:一共有n张牌,每张牌有三个属性ai,bi,ci.问在属性上限为A,B,C的所有牌中有多少张牌满足至少有两个属性可以完全压制(严格大于)那n张牌? n<=50W. 标程: #include& ...
- Nginx的安装--------tar包安装
Nginx的安装,在网上搜索是很多的结果,但是 真的安装起来却花费了不少 心思,总结起来就是依赖包安装了,但是没有指定对的路径,在安装的过程中遇到过两个问题: ①make[1]: *** [/usr/ ...
- 学习笔记 css样式
大小 width:宽度 height:高度 背景 background-color 背景色 background-image 背景图片 background-repeat 背景平铺 ...
- csp-s模拟测试54x,y,z题解
题面:https://www.cnblogs.com/Juve/articles/11606834.html x: 并差集,把不能分到两个集合里的元素和并到一起,设连通块个数为cnt,则答案为:$2^ ...
- 数论整除——cf1059D
用map是卡着过去的..题解用vector+离散化后常数小了十倍.. 总之就是把所有模数给保存下来然后离散化,再去匹配一下即可,最后有个细节 自己的 #include<bits/stdc++.h ...
- 杂项-公司:AT&T
ylbtech-杂项-公司:AT&T AT&T公司(英语:AT&T Inc.,原为American Telephone & Telegraph的缩写,也是中文译名美国电 ...
- Android开发随笔
1.线性布局LinearLayout时,用到layout_weight权重的使用 控件的宽度(高度)=自身宽度(高度)+剩余空间的所占比例 剩余空间(可以为负值)=屏幕宽-所有控件宽度(高度)< ...