欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>CSS教程

目录导航

CSS 3 渐变使用的方法,CSS 3 背景渐变色设计

美国西岸机房 添加于 2012-09-04  

CSS教程

CSS 3中的渐变属性的支持度具体是:IE10、FF3.6+、Safari4.0+、Chrome、Opera11.1+、iOS3.2+、Opera Mobile11.1、Android,也就是说除了IE10以外其它的浏览器已经支持 CSS3 的渐变属性了(虽然有些还在使用私有属性)。【Opera暂不支持径向渐变】
1、线性渐变(从顶到底)

CSS 3 渐变使用的方法,CSS 3 背景渐变色设计-图片1
CSS 3 渐变使用的方法,CSS 3 背景渐变色设计-图片1

div{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(top, blue, red);/* Safari, Chrome*/
background:-moz-linear-gradient(top, blue, red);/* Firefox*/
background:-o-linear-gradient(top, blue, red);/* Opera, Opera mobile*/
}
第一个参数是指从上开始,后面没有方位参数自然就是下啦。blue,red为颜色值,即从上到下,由蓝色到红色渐变。当然我们也可以让它变成从水平线性。
2、线性渐变(从左到右)
CSS 3 渐变使用的方法,CSS 3 背景渐变色设计-图片2
CSS 3 渐变使用的方法,CSS 3 背景渐变色设计-图片2

div{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(left, blue, red);/* Safari, Chrome*/
background:-moz-linear-gradient(left, blue, red);/* Firefox*/
background:-o-linear-gradient(left, blue, red);/* Opera, Opera mobile*/
}
3、线性渐变(加入stop() 函数)
CSS 3 渐变使用的方法,CSS 3 背景渐变色设计-图片3
CSS 3 渐变使用的方法,CSS 3 背景渐变色设计-图片3

div{ width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,#1a82f7 85%, red);/* Safari, Chrome*/
background:-moz-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%, #1a82f7 85%, red);/* Firefox*/
background:-o-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%, #1a82f7 85%, red);/* Opera, Opera mobile*/
}
上面代码的意思指:从左到15%处,再到50%处,再到85%处,再到右边,颜色依次为从blue到#1a82f7, #2F2727, #1a82f7再到red,依次渐变显示。当然中间的50%是可以省略的,不过不建议省略,直接用上百分比位置,看起来也比较清楚。
总结一下:线性渐变前面第一个参数如left,即意思为从left——right渐变,如果为top,即意思为从top——bottom渐变。如果参数为“top left”,即意思从top left—— bottom right渐变。
第二个参数为渐变开始的第一个颜色,依次为其它渐变色,最后一个颜色即为最后的渐变色。那中间的渐变色,还有另一个位置参数,如 #1a82f7 15%即为从上一个颜色处到15%处,依次渐变为 #1a82f7。
那肯定有人会问了,如果我中间的渐变色不加位置参数呢?那也简单,位置均分渐变,即(left, blue, #1a82f7 , #2F2727 , #1a82f7 , red) == (left, blue, #1a82f7 25%, #2F2727 50%, #1a82f7 75%, red)。
4、径向渐变(从圆心到外面)
CSS 3 渐变使用的方法,CSS 3 背景渐变色设计-图片4
CSS 3 渐变使用的方法,CSS 3 背景渐变色设计-图片4

div{
width:200px;
height:200px;
padding:5px;
border:1px solid #ccc;
background:-webkit-radial-gradient(circle, blue, red);/* Safari, Chrome*/
background:-moz-radial-gradient(circle, blue, red);/* Firefox*/
}
径向渐变,从圆心向处围渐变,颜色从blue渐变为red。当然,如果参数circle替换为ellipse,则为椭圆形的径向渐变。
CSS 3 渐变在线生成工具:http://www.colorzilla.com/gradient-editor/

本文出自零度科技转载请注明出处:http://www.ldisp.com/a/css/2012/1319.shtml

上一篇:CSS3 -webkit-transform: rotate(180deg)
下一篇:取消Chrome和Safari下文本域的resize和focus边框

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

0

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理