CSS3魔法堂：背景渐变（Gradient）

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　

很久之前就了解过CSS3的线性渐变（Linear-Gradient），这段时间决定进一步认知这一特性，以下笔记以便日后查阅。

二、CSS3的各种背景渐变　　　　　　　　　　　　　　　　　　　　

  1. 线性渐变

示例——七彩虹

　　

代码：

<style type="text/css">
.rainbow-linear-gradient{
    width: 460px;
    height: 160px;

    background-image: -webkit-linear-gradient(left,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%);
    background-image: -moz-linear-gradient(left,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%);
    background-image: -o-linear-gradient(left,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%);
    background-image: -ms-linear-gradient(left,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%);
    background-image: linear-gradient(left,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%);
}
</style>
<div class="rainbow-linear-gradient"></div>

样式属性： linear-gradient(起始角度, color stop, color stop[, color stop]*) 

起始角度 ，用于设置线 性渐变效果的起始角度，值为角度数或预设值。角度数的取值范围是0~365deg，预设值（默认值为top）的取值范围是 [left,right,top,bottom,center,top right,top left,bottom left,bottom right,left center,right center]。（注意：IE10只能取[left,top]，Chrome则没有[center,left center,right center]）。

color stop ，用于设置颜色边界，color为边界的颜色；stop为该边界的位置，stop的值为像素数值或百分比数值，若为百分比且小于0%或大于100%则表示该边界位于可视区域外。两个 color stop 之间的区域为颜色过渡区，颜色将从靠左的边界的颜色线性渐变为靠右的边界的颜色。

2. 放射性渐变

示例——七彩虹球

代码：

<style type="text/css">
.rainbow-radial-gradient{
    width: 160px;
    height: 160px;

    background-image: -webkit-radial-gradient(center,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%);
    background-image: -moz-radial-gradient(center,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%);
    background-image: -o-radial-gradient(center,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%);
    background-image: -ms-radial-gradient(center,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%);
    background-image: radial-gradient(center,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%);
}</style>
<div class="rainbow-radial-gradient"></div>

    样式属性： radial-gradient(圆心坐标, 渐变形状 渐变大小, color stop, color stop[, color stop]*) 

圆心坐标 ，用于设置放射的圆形坐标，可设置为形如10px 20px的 x-offset y-offset ，或使用预设值center（默认值）。

渐变形状 ，取值范围为预设值circle（圆形）和ellipse（椭圆形，默认值）。

渐变大小 ，取值范围为如下预设值

　　　　　　　　 closest-side 或 contain ，以距离圆心最近的边的距离作为渐变半径。

　　　　　　　  closest-corner ，以距离圆心最近的角的距离作为渐变半径。

　　　　　　     farthest-side ，以距离圆心最远的边的距离作为渐变半径。

　　　　　　　　 farthest-corner 或 cover ，以距离圆心最远的角的距离作为渐变半径。

  3. 重复线性渐变

　　示例——重复的彩虹　　

代码：

<style type="text/css">
 .rainbow-repeating-linear-gradient{
    width: 460px;
    height: 160px;

    background-image: -webkit-repeating-linear-gradient(left,#E50743 0%, #F9870F 5%, #E8ED30 10%, #3FA62E 15%,#3BB4D7 20%,#2F4D9E 25%,#71378A 30%);
    background-image: -moz-repeating-linear-gradient(left,#E50743 0%, #F9870F 5%, #E8ED30 10%, #3FA62E 15%,#3BB4D7 20%,#2F4D9E 25%,#71378A 30%);
    background-image: -o-repeating-linear-gradient(left,#E50743 0%, #F9870F 5%, #E8ED30 10%, #3FA62E 15%,#3BB4D7 20%,#2F4D9E 25%,#71378A 30%);
    background-image: -ms-repeating-linear-gradient(left,#E50743 0%, #F9870F 5%, #E8ED30 10%, #3FA62E 15%,#3BB4D7 20%,#2F4D9E 25%,#71378A 30%);
    background-image: repeating-linear-gradient(left,#E50743 0%, #F9870F 5%, #E8ED30 10%, #3FA62E 15%,#3BB4D7 20%,#2F4D9E 25%,#71378A 30%);
}</style>
<div class="rainbow-repeating-linear-gradient"></div>

   样式属性： repeating-linear-gradient(起始角度, color stop, color stop[, color stop]*) 

各配置项的意思和取值规范均与linear-gradient一样。唯一区别在于最后一个colo stop所配置的颜色并不会作为元素剩余部分的背景色，而是不断重复整个线性渐变处理。

  4. 重复放射性渐变

示例——重复的彩虹球

代码：

<style type="text/css">
.rainbow-repeating-radial-gradient{
    width: 160px;
    height: 160px;

    background-image: -webkit-repeating-radial-gradient(center,#E50743 0%, #F9870F 5%, #E8ED30 10%, #3FA62E 15%,#3BB4D7 20%,#2F4D9E 25%,#71378A 30%);
    background-image: -moz-repeating-radial-gradient(center,#E50743 0%, #F9870F 5%, #E8ED30 10%, #3FA62E 15%,#3BB4D7 20%,#2F4D9E 25%,#71378A 30%);
    background-image: -o-repeating-radial-gradient(center,#E50743 0%, #F9870F 5%, #E8ED30 10%, #3FA62E 15%,#3BB4D7 20%,#2F4D9E 25%,#71378A 30%);
    background-image: -ms-repeating-radial-gradient(center,#E50743 0%, #F9870F 5%, #E8ED30 10%, #3FA62E 15%,#3BB4D7 20%,#2F4D9E 25%,#71378A 30%);
    background-image: repeating-radial-gradient(center,#E50743 0%, #F9870F 5%, #E8ED30 10%, #3FA62E 15%,#3BB4D7 20%,#2F4D9E 25%,#71378A 30%);
}
</style>
<div class="rainbow-repeating-radial-gradient"></div>

    样式属性： repeating-radial-gradient(圆心坐标, 渐变形状 渐变大小, color stop, color stop[, color stop]*) 

　　　各配置项的意思和取值规范均与radial-gradient一样。

  5. 背景渐变模式

将上述四种渐变效果混合就可以创造各种背景渐变模式了！国外CSS高手的设计：http://lea.verou.me/css3patterns/

示例

　　

代码：

<style type="text/css">
.bg{
  width: 260px;
  height: 260px;

  /* 设置多个渐变背景图， 使用逗号分隔 */
  background-image:
      radial-gradient(transparent 10%, #ccc 15%, #ccc 20%, transparent 100%),
      radial-gradient(35px 35px, transparent 10%, #aaa 15%, #aaa 20%, transparent 100%);
  background-color: #eee;
  background-size: 60px 60px,80px 80px;
</style>
<div class="bg"></div>

这里用到CSS3的新特性——Multiple Background Image和background-size属性。

三、IE5.5~9的背景渐变　　　　　　　　　　　　　　　　　　　　

由于IE5.5~9不支持CSS3的渐变特性，因此需要使用IE滤镜进行处理，而且IE的渐变滤镜仅提供从left到right，和从top到bottom的线性渐变效果，并且只能是设置为两种颜色的过渡效果而已。

滤镜格式： filter:progid:DXImageTransfer.Microsoft.gradient([startcolorstr=‘起始颜色‘|startcolor=起始颜色数值],[endcolorstr=‘结束颜色‘|endcolor=结束颜色数值],GradientType=渐变类型)

GradientType ，取值范围——0（默认值，表示从top到bottom渐变），1（表示从left到right渐变）。

startcolor 和 endcolor ，值为十进制的整数，取值范围0~4294967295（由startcolorstr和endcolorstr的十六进制值转换而来）。

startcolorstr 和 endcolorstr ，值格式为#AARRGGBB，其中AA为透明度的十六进制表示形式，其余则为RGB的十六进制表示形式，endcolorstr的默认值为#FF000000，startcolorstr的默认值为#FF0000FF。

四、SVG的背景渐变　　　　　　　　　　　　　　　　　　　　　 

SVG可谓是我最期待的新特性。下面了解一下SVG下的背景渐变。

   线性渐变示例——彩虹

代码：

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg  width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:#E50743;"/>
                <stop offset="15%" style="stop-color:#F9870F;"/>
                <stop offset="30%" style="stop-color:#E8ED30;"/>
                <stop offset="45%" style="stop-color:#3FA62E;"/>
                <stop offset="60%" style="stop-color:#3BB4D7;"/>
                <stop offset="75%" style="stop-color:#2F4D9E;"/>
                <stop offset="80%" style="stop-color:#71378A;"/>
        </linearGradient>
    </defs>
    <ellipse cx="90" cy="60" rx="85" ry="55" style="fill:url(#linear-gradient)"/>
</svg> 

线性滤镜的SVG标签为 linearGradient  ，其中 x1 和 y1 为渐变的起始位移， x2 和 y2 为渐变的结束位移。而 stop标签 则用于设置颜色边界。

其他元素通过 fill:url(#滤镜ID) 来应用该滤镜。

放射性渐变示例——彩虹

代码：

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg  width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
        <radialGradient id="radial-gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                <stop offset="0%" style="stop-color:#E50743;"/>
                <stop offset="15%" style="stop-color:#F9870F;"/>
                <stop offset="30%" style="stop-color:#E8ED30;"/>
                <stop offset="45%" style="stop-color:#3FA62E;"/>
                <stop offset="60%" style="stop-color:#3BB4D7;"/>
                <stop offset="75%" style="stop-color:#2F4D9E;"/>
                <stop offset="80%" style="stop-color:#71378A;"/>
        </radialGradient>
    </defs>
    <circle cx="360" cy="90" r="85" style="fill:url(#radial-gradient)"/>
</svg>

放射性滤镜的SVG标签为 radialGradient ，其中 cx 和 cy 为圆心位移， r  为渐变半径， fx 和 fy 为内圈范围。

注意：滤镜linearGradient和radialGradient均不能应用到非SVG元素上。

五、总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　

上述内容仅仅对背景渐变进行简单介绍，若有纰漏望各位指正，谢谢！

尊重原创，http://www.cnblogs.com/fsjohnhuang/p/4126525.html 转载请注明来自： ^_^肥仔John

六、参考　　　　　　　　　　　　　　　　　　　　　　　　　　　　

《HTML5秘籍》8.4.5.渐变盒子

《响应式Web设计：HTML5和CSS3实战》6.3.背景渐变，6.4.背景图渐变

CSS3 的线性渐变：http://www.zhanxin.info/development/2012-12-09-css3-linear.html

介绍repeating-linear-gradient和repeating-radius-gradient：http://www.webkit.org/blog/1424/css3-gradients/

IE滤镜：http://msdn.microsoft.com/zh-cn/library/ms532853%28v=VS.85%29.aspx

SVG滤镜：http://www.w3.org/TR/2003/REC-SVG11-20030114/filters.html

张鑫旭的background详解：http://www.zhangxinxu.com/wordpress/2011/05/%E7%BF%BB%E8%AF%91-css3-backgrounds%E7%9B%B8%E5%85%B3%E4%BB%8B%E7%BB%8D/

如果您觉得本文的内容有趣就扫一下吧！捐赠互勉！

时间： 2024-10-03 18:27:25

CSS3魔法堂：背景渐变（Gradient）的相关文章

CSS3的背景渐变gradient

CSS3 Gradient 分为 linear-gradient(线性渐变) 和 radial-gradient(径向渐变).记住渐变并不是CSS3的一个属性,而是一个属性的值,虽然在CSS3中没有专门注明渐变是针对background的,但是目前我所了解到的是只有background才会应用渐变属性(background-image也可以). 我们先直接通过两个实例来说明这两种渐变的基本用法:分享一个最好用的UI前端框架! 线性渐变linear-gradient: .代码 background

web前端小案例-css3制作浏览器背景渐变背

知识点:rgb全色循环算法,HEX与RGB颜色转换算法.CSS3颜色渐变,CSS3渐变色兼容ie方法,定时器与循环,函数封装,数组应用等. css代码: <style> *{margin:0;padding:0;} body#wrap{width:100%;height:500px; } </style> JavaScript代码: <script> function convert(sRgb){ /*rgb转换成HEX*/ var sRgb=sRgb; var sHe

CSS3魔法堂：认识@font-face和Font Icon

一.前言 过去我们总通过图片来美化站点的LOGO.标题.图标等,而现在我们可以通过@font-face获取另一种更灵活的美化方式. 二.看看例子 /* 定义 */ @font-face { font-family: 'MicrosoftYaHei'; src: url('MicrosoftYaHei.eot'); /* IE9 Compat Modes */ src: url('MicrosoftYaHei.eot?#iefix') format('embedded-opentype'), /*

CSS3魔法堂：禁止用户改变textarea大小

一.前言 在FF.Chrome和Safari下默认时允许用户以拖拽形式来改变textarea大小,这不仅与IE下textarea的行为特点有异,而且textarea的大小变化会撑大其父节点从而破坏整体布局. 二.原因 通过调用 window.getComputedStyle(textarea元素, null).resize 返回both,我们可以知道原来是resize样式属性搞的鬼. 三.CSS3属性──resize 用于设置UserAgent调整元素尺寸的机制,就是说设置用户能否和如何自行改变

CSS3魔法堂：滤镜

一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 Filter,而FF和IE10+则需要使用SVG滤镜(svg effects for html)或Canvas作为替代方案处理了,而IE5.5~9则使用IE滤镜.JS+DIV或VML处理!本篇为先占个坑,以后慢慢填^_^!!! CSS3 Filter兼容性表 SVG effect for HTML兼容

CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅 Webkit内核的浏览器支持CSS3 Filter,而FF和IE10+则需要使用SVG滤镜(svg effects for html)或Canvas作为替代方案处理了,而IE5.5~9则使用IE滤镜.JS+DIV或VML处理!本篇为先占个坑,以后慢慢填^_^!!! CSS3 Filter兼容性表 SVG effect for HTML兼

第161天：CSS3实现兼容性的渐变背景(gradient)效果

CSS实现兼容性的渐变背景(gradient)效果 一.有点俗态的开场白 在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果.在众多的浏览器中,目前不支持Opera浏览器. 本文实例效果都是同样的效果,就是垂直渐变,起始颜色红色,结束颜色蓝色,结束的蓝色的透明度是0.5. 二.IE浏览器下的渐变背景 IE浏览器下渐变背景的使用需要使用IE的渐变滤镜.如下代码: filter: progid:DXImageTransform.Micr

CSS3中渐变gradient详解

这几天看了一本HTML5的书,里面对于页面的背景使用了大量的渐变效果,因此在这里写一些关于渐变Gradient的东西. CSS3中的Gradient有两种,分别是线性渐变(linear-gradient)和径向渐变(radial-gradient),下面分别是线性与径向渐变的效果(用Flash画的,习惯了 O(∩_∩)O哈哈~.?) 首先说一下webkit的浏览器(谷歌的Chrome啊等等) webkit下对于Gradient定义了两种方法: -webkit-linear-gradient -w

CSS3基本属性之渐变Gradient

CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步.虽然如此但还是有很多朋友在钻研CSS3在web中的应用,为了不被淘汰,我也开始向CSS3进发,争取跟上技术的前沿.从现在开始我会不断的发布一些CSS3的应用,和大家一起分享,今天我们首先要看的就是:CSS3: Gradient─CSS3渐变. CSS3 Gradient分为linear-gradient(线性渐变)和radial-grad