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. centos7 将home目录空间扩容到根目录

    [root@localhost ~]# umount /home/ [root@localhost ~]# lvremove /dev/mapper/centos-home Do you really ...

  2. final、static、package、import,和内部类、代码块总结

    final: final是最终修饰符,可以修饰类.成员方法.变量 final修饰的类无法被继承 final修饰的方法无法被重写 final修饰的变量无法被再次赋值,变为了常量 final修饰的引用数据 ...

  3. js中一个标签在按顺序执行没有被读取到时可以用window.onload

    <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> <!DOCTYPE html PUBLIC " ...

  4. JavaScript对象小基础

    对象的简单学习: 1.String对象1:属性     在javascript中可以用单引号,或者双引号括起来的一个字符当作     一个字符对象的实例,所以可以在某个字符串后再加上.去调用Strin ...

  5. 简单的UDP服务端和客户端示例

    UDP的理论不再多说,我这里直接给出一个关于UDP的HelloWorld程序,代码明了,希望对刚入门的学生有所帮助! 当然,实际上,在这块我也刚入门! 首先写服务端代码,服务端邦定本地的IP和端口来监 ...

  6. 2019-8-31-win2d-通过-CanvasActiveLayer-画出透明度和裁剪

    title author date CreateTime categories win2d 通过 CanvasActiveLayer 画出透明度和裁剪 lindexi 2019-08-31 08:52 ...

  7. CF875E Delivery Club

    题意:两个邮递员,一个初始在s1,s2.需要依次给x1,x2,...,xn送快递.求所有时刻中两个邮递员的距离最大值的最小值.n<=100000,xi<=1e9. 标程: #include ...

  8. [转]使用TortoiseGit处理代码冲突

    场景一  user0 有新提交 user1 没有pull -> 写新代码 -> pull -> 提示有冲突   解决办法一 -> stash save(把自己的代码隐藏存起来) ...

  9. Java监控工具介绍,VisualVm ,JProfiler,Perfino,Yourkit,Perf4J,JProbe,Java微基准测试【转】

    Java监控工具介绍,VisualVm ,JProfiler,Perfino,Yourkit,Perf4J,JProbe,Java微基准测试[转] 本文是本人前一段时间做一个简单Java监控工具调研总 ...

  10. pg总览

    一.编译安装初始化等 ./configure --prefix=/release --with-openssl --without-ldap --with-libxml - -enable-threa ...