1. 线性渐变 示例——七彩虹
代码:
<style type="text/css">.rainbow-linear-gradient{ width: 460px; height: 160px; background-image:-webkit-linear-gradient(left,#E507430%, #F9870F15%, #E8ED3030%, #3FA62E45%,#3BB4D760%,#2F4D9E75%,#71378A80%); background-image:-moz-linear-gradient(left,#E507430%, #F9870F15%, #E8ED3030%, #3FA62E45%,#3BB4D760%,#2F4D9E75%,#71378A80%); background-image:-o-linear-gradient(left,#E507430%, #F9870F15%, #E8ED3030%, #3FA62E45%,#3BB4D760%,#2F4D9E75%,#71378A80%); background-image:-ms-linear-gradient(left,#E507430%, #F9870F15%, #E8ED3030%, #3FA62E45%,#3BB4D760%,#2F4D9E75%,#71378A80%); background-image: linear-gradient(left,#E507430%, #F9870F15%, #E8ED3030%, #3FA62E45%,#3BB4D760%,#2F4D9E75%,#71378A80%); }</style><divclass="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,#E507430%, #F9870F15%, #E8ED3030%, #3FA62E45%,#3BB4D760%,#2F4D9E75%,#71378A80%); background-image:-moz-radial-gradient(center,#E507430%, #F9870F15%, #E8ED3030%, #3FA62E45%,#3BB4D760%,#2F4D9E75%,#71378A80%); background-image:-o-radial-gradient(center,#E507430%, #F9870F15%, #E8ED3030%, #3FA62E45%,#3BB4D760%,#2F4D9E75%,#71378A80%); background-image:-ms-radial-gradient(center,#E507430%, #F9870F15%, #E8ED3030%, #3FA62E45%,#3BB4D760%,#2F4D9E75%,#71378A80%); background-image: radial-gradient(center,#E507430%, #F9870F15%, #E8ED3030%, #3FA62E45%,#3BB4D760%,#2F4D9E75%,#71378A80%); }
</style><divclass="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,#E507430%, #F9870F5%, #E8ED3010%, #3FA62E15%,#3BB4D720%,#2F4D9E25%,#71378A30%); background-image:-moz-repeating-linear-gradient(left,#E507430%, #F9870F5%, #E8ED3010%, #3FA62E15%,#3BB4D720%,#2F4D9E25%,#71378A30%); background-image:-o-repeating-linear-gradient(left,#E507430%, #F9870F5%, #E8ED3010%, #3FA62E15%,#3BB4D720%,#2F4D9E25%,#71378A30%); background-image:-ms-repeating-linear-gradient(left,#E507430%, #F9870F5%, #E8ED3010%, #3FA62E15%,#3BB4D720%,#2F4D9E25%,#71378A30%); background-image: repeating-linear-gradient(left,#E507430%, #F9870F5%, #E8ED3010%, #3FA62E15%,#3BB4D720%,#2F4D9E25%,#71378A30%); }
</style><divclass="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,#E507430%, #F9870F5%, #E8ED3010%, #3FA62E15%,#3BB4D720%,#2F4D9E25%,#71378A30%); background-image:-moz-repeating-radial-gradient(center,#E507430%, #F9870F5%, #E8ED3010%, #3FA62E15%,#3BB4D720%,#2F4D9E25%,#71378A30%); background-image:-o-repeating-radial-gradient(center,#E507430%, #F9870F5%, #E8ED3010%, #3FA62E15%,#3BB4D720%,#2F4D9E25%,#71378A30%); background-image:-ms-repeating-radial-gradient(center,#E507430%, #F9870F5%, #E8ED3010%, #3FA62E15%,#3BB4D720%,#2F4D9E25%,#71378A30%); background-image: repeating-radial-gradient(center,#E507430%, #F9870F5%, #E8ED3010%, #3FA62E15%,#3BB4D720%,#2F4D9E25%,#71378A30%); }</style><divclass="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(transparent10%, #ccc15%, #ccc20%, transparent100%), radial-gradient(35px 35px, transparent10%, #aaa15%, #aaa20%, transparent100%); background-color: #eee; background-size: 60px 60px,80px 80px;</style><divclass="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;"/> < nearGradient> </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元素上。
<style type="text/css">.rainbow-linear-gradient{ width: 460px; height: 160px; background-image:-webkit-linear-gradient(left,#E507430%, #F9870F15%, #E8ED3030%, #3FA62E45%,#3BB4D760%,#2F4D9E75%,#71378A80%); background-image:-moz-linear-gradient(left,#E507430%, #F9870F15%, #E8ED3030%, #3FA62E45%,#3BB4D760%,#2F4D9E75%,#71378A80%); background-image:-o-linear-gradient(left,#E507430%, #F9870F15%, #E8ED3030%, #3FA62E45%,#3BB4D760%,#2F4D9E75%,#71378A80%); background-image:-ms-linear-gradient(left,#E507430%, #F9870F15%, #E8ED3030%, #3FA62E45%,#3BB4D760%,#2F4D9E75%,#71378A80%); background-image: linear-gradient(left,#E507430%, #F9870F15%, #E8ED3030%, #3FA62E45%,#3BB4D760%,#2F4D9E75%,#71378A80%); }</style><divclass="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,#E507430%, #F9870F15%, #E8ED3030%, #3FA62E45%,#3BB4D760%,#2F4D9E75%,#71378A80%); background-image:-moz-radial-gradient(center,#E507430%, #F9870F15%, #E8ED3030%, #3FA62E45%,#3BB4D760%,#2F4D9E75%,#71378A80%); background-image:-o-radial-gradient(center,#E507430%, #F9870F15%, #E8ED3030%, #3FA62E45%,#3BB4D760%,#2F4D9E75%,#71378A80%); background-image:-ms-radial-gradient(center,#E507430%, #F9870F15%, #E8ED3030%, #3FA62E45%,#3BB4D760%,#2F4D9E75%,#71378A80%); background-image: radial-gradient(center,#E507430%, #F9870F15%, #E8ED3030%, #3FA62E45%,#3BB4D760%,#2F4D9E75%,#71378A80%); }
</style><divclass="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,#E507430%, #F9870F5%, #E8ED3010%, #3FA62E15%,#3BB4D720%,#2F4D9E25%,#71378A30%); background-image:-moz-repeating-linear-gradient(left,#E507430%, #F9870F5%, #E8ED3010%, #3FA62E15%,#3BB4D720%,#2F4D9E25%,#71378A30%); background-image:-o-repeating-linear-gradient(left,#E507430%, #F9870F5%, #E8ED3010%, #3FA62E15%,#3BB4D720%,#2F4D9E25%,#71378A30%); background-image:-ms-repeating-linear-gradient(left,#E507430%, #F9870F5%, #E8ED3010%, #3FA62E15%,#3BB4D720%,#2F4D9E25%,#71378A30%); background-image: repeating-linear-gradient(left,#E507430%, #F9870F5%, #E8ED3010%, #3FA62E15%,#3BB4D720%,#2F4D9E25%,#71378A30%); }
</style><divclass="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,#E507430%, #F9870F5%, #E8ED3010%, #3FA62E15%,#3BB4D720%,#2F4D9E25%,#71378A30%); background-image:-moz-repeating-radial-gradient(center,#E507430%, #F9870F5%, #E8ED3010%, #3FA62E15%,#3BB4D720%,#2F4D9E25%,#71378A30%); background-image:-o-repeating-radial-gradient(center,#E507430%, #F9870F5%, #E8ED3010%, #3FA62E15%,#3BB4D720%,#2F4D9E25%,#71378A30%); background-image:-ms-repeating-radial-gradient(center,#E507430%, #F9870F5%, #E8ED3010%, #3FA62E15%,#3BB4D720%,#2F4D9E25%,#71378A30%); background-image: repeating-radial-gradient(center,#E507430%, #F9870F5%, #E8ED3010%, #3FA62E15%,#3BB4D720%,#2F4D9E25%,#71378A30%); }</style><divclass="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(transparent10%, #ccc15%, #ccc20%, transparent100%), radial-gradient(35px 35px, transparent10%, #aaa15%, #aaa20%, transparent100%); background-color: #eee; background-size: 60px 60px,80px 80px;</style><divclass="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;"/> < nearGradient> </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元素上。