线性渐变--linear-gradient
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*IE依靠滤镜实现渐变。startColorstr表示起点的颜色,endColorstr表示终点颜色。
GradientType表示渐变类型,0为缺省值,表示垂直渐变,1表示水平渐变。*/
div {
margin-bottom:10px;
border:2px solid #000;
width:200px;
height:100px;
float:left;
margin-right:10px;
}
.box {
width:200px;
height:100px;
background:-moz-linear-gradient(left,#000,#f00);
background:-webkit-gradient(linear,left top,right bottom,from(#000),to(#f00));
background:-webkit-linear-gradient(left,#000,#f00);
background:-o-linear-gradient(left,#000,#f00);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#f00, endColorstr=#000);/*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#f00, endColorstr=#000)";/*IE8+*/
}
/*1、开始于center(水平方向)和top(垂直方向)也就是Top → Bottom:*/
.box1 {
width:200px;
height:100px;
/*background:-webkit-linear-gradient(top,#ffffc7,#019934);*/
background:-moz-linear-gradient(top,#ffffc7,#019934);
background:-webkit-gradient(linear,top,from(#ffffc7),to(#019934));
background:-webkit-linear-gradient(top,#ffffc7,#019934);
background:-o-linear-gradient(top,#ffffc7,#019934);
background:linear-gradient(top,#ffffc7,#019934);
}
/*3、起始于left(水平方向)和top(垂直方向):*/
.box3 {
width:200px;
height:100px;
background:-moz-linear-gradient(left top,#cd0069,#009997);
background:-webkit-linear-gradient(left top,#cd0069,#009997);
background:-o-linear-gradient(left top,#cd0069,#009997);
background:linear-gradient(left top,#cd0069,#009997);
}
/*with Specified Arbitrary Stops:*/
.box5 {
width:200px;
height:100px;
background:-moz-linear-gradient(left,#ace,#f96,#ace,#f96);
/*background:-webkit-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);*/
background:-webkit-gradient(linear,left top,right bottom,from(#ace),color-stop(0.25,#f96),color-stop(0.5,#ace),color-stop(0.75,#f96),to(#ace));
background:-o-linear-gradient(left,#ace,#f96,#ace,#f96);
background:linear-gradient(left,#ace,#f96,#ace,#f96)
}
/*6、角度(Angle):
正如上面看到的示例,如果您不指定一个角度,它会根据起始位置自动定义。
如果你想更多的控制渐变的方向,您不妨设置角度试试。例如,下面的两个渐
变具有相同的起点left center,但是加上一个30度的角度。*/
.deg0 {
background: -moz-linear-gradient(0deg, #ace, #f96);
background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
background: -webkit-linear-gradient(0deg, #ace, #f96);
background: -o-linear-gradient(0deg, #ace, #f96);
}
.deg45 {
background: -moz-linear-gradient(45deg, #ace, #f96);
background: -webkit-gradient(linear,0 100%,100% 0%,from(#ace),to(#f96));
background: -webkit-linear-gradient(45deg, #ace, #f96);
background: -o-linear-gradient(45deg, #ace, #f96);
}
.deg90 {
background: -moz-linear-gradient(90deg, #ace, #f96);
background: -webkit-gradient(linear,50% 100%,50% 0%,from(#ace),to(#f96));
background: -webkit-linear-gradient(90deg, #ace, #f96);
background: -o-linear-gradient(90deg, #ace, #f96);
}
.deg135 {
background: -moz-linear-gradient(135deg, #ace, #f96);
background: -webkit-gradient(linear,100% 100%,0 0,from(#ace),to(#f96));
background: -webkit-linear-gradient(135deg, #ace, #f96);
background: -o-linear-gradient(135deg, #ace, #f96);
}
.deg180 {
background: -moz-linear-gradient(180deg, #ace, #f96);
background: -webkit-gradient(linear,100% 50%,0 50%,from(#ace),to(#f96));
background: -webkit-linear-gradient(180deg, #ace, #f96);
background: -o-linear-gradient(180deg, #ace, #f96);
}
.deg360 {
background: -moz-linear-gradient(360deg, #ace, #f96);
background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
background: -webkit-linear-gradient(360deg, #ace, #f96);
background: -o-linear-gradient(360deg, #ace, #f96);
}
.imgs {
width:200px;
height:100px;
background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(logo.png);
background: -webkit-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(logo.png);
background: -o-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(logo.png);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box3"></div>
<div class="box5"></div>
<div class="deg0">deg0</div>
<div class="deg45">deg45</div>
<div class="deg90">deg90</div>
<div class="deg135">deg135</div>
<div class="deg180">deg180</div>
<div class="deg360">deg360</div>
<div class="imgs">pics</div>
</body>
</html>
线性渐变--linear-gradient的更多相关文章
- CSS3之线性渐变(linear gradients)
线性渐变(linear gradients)沿着一根轴线改变颜色,从起点到终点颜色进行顺序渐变. 语法: background:linear-gradient(direction,color-stop ...
- CSS3渐变(Gradients)-线性渐变
CSS3渐变(Gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度. 以前,你必须使用图像来实现这些效果.但是,通过Css3渐变(Gradients),你可以减少下载的事件和 ...
- 再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- CSS3 Gradient线性渐变
废话小说,看代码 <!DOCTYPE html > <html > <head> <meta charset="utf-8"> &l ...
- 【01】CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变)(转)
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 ...
- [转]ebkit内核浏览器的Linear Gradients (线性渐变)
转自:http://www.css88.com/archives/tag/webkit-gradient webkit内核的safari. Chrome的Linear Gradients (线性渐变) ...
- 深入理解CSS3 gradient斜向线性渐变——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3639 一.问题没有想 ...
- CSS线性渐变
/*CSS线性渐变*/ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff, ...
- CSS3 线性渐变(linear-gradient) 兼容IE8,IE9
一.线性渐变在 Mozilla 下的应用 语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, ...
随机推荐
- 字段符号FIELD-SYMBOLS
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- SQL - 批量修改表中所有行数据某字段的部分内容
UPDATE 表名 SET 字段名 = REPLACE (字段名, 'old', 'new');
- 不要温柔地走入promise
第一步 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...
- NPN&PNP
一.晶体管基础知识 晶体管分2种:NPN.PNP 晶体管通常封装为TO-92,下面是元件实物图 和 元件符合: NPN: 当电压和电流被加到基极上时,NPN晶体管: 其工作原理: 就像水龙头—给控制开 ...
- javascript中的计时器
javascript中的定时器有两种:一种是一次性定时器,一种是可以持续使用的定时器: 1:一次性定时器setTimeout(a,b):兼容ie的任何版本 该方法接受两个参数,第一个是要执行的代码,第 ...
- java文件操作(读流)
try{ InputStream is = new FileInputStream("abc.txt"); InputStreamReader ir = new InputStre ...
- hdu 3117 Fibonacci Numbers
这道题其实也是水题来的,求Fibonacci数的前4位和后4位,在n==40这里分界开.后4位不难求,因为n达到了10^18的规模,所以只能用矩阵快速幂来求了,但在输出后4位的时候一定要注意前导0的处 ...
- android 存储
总共四种:SharedPreferences,文件存储,SQLite数据库,ContentProvider,网络存储 1.sharedPreferences:适合存储少量数据,而且存取的格式简单,采用 ...
- 论APP测试中黑盒测试方案的重要性?
运筹帷幄之中,决胜千里之外.古人足不出户,通过正确的部署就能决定千里之外战争的胜利!而于测试人员而言,制定正确的测试方案,就是日后测试就是是否顺利的决定性因素. 在整个测试过程中,对测试人员.资源以及 ...
- JavaScript高阶函数的应用
定义 高阶函数是指至少满足下列条件之一的函数: 函数可以作为参数被传递: 函数可以作为返回值输出. JavaScript语言中的函数显然满足高阶函数的条件,在实际开发中,无论是将函数当作参数传递,还是 ...