javascript和JQuery焦点图和代码特效大全
当前最流行的开源CMS网站系统大全
当前位置:主页 > WEB前端 > CSS-HTML >

CSS3线性渐变举例详解

来源:IT技术网编辑:香独秀发布于:2013-07-24人围观CSS3举例线性渐变

CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。CSS3可以让Firefox 和Safari/Chrome实现颜色渐变,IE可以用滤镜,这也是一种值得考虑的很酷的方法。

    css3颜色渐变在Youtube上的视频http://www.youtube.com/watch?v=9D2hyM5SSCE

    moz颜色渐变语句:

    -moz-linear-gradient( [

<point> <angle>,]? <stop>, <stop> [, <stop>]* );

即:

   -moz-linear-gradient(top, red, blue);

   其中top可以理解为正上方的一个点point,写为50% 0,-moz-linear-gradient(50% 0

, red, blue);也可以

理解为一个角度angle,写为-90deg, -moz-linear-gradient(-90deg, red, blue);

   这两句与上面那句实现的效果是一样的;

   后面两个颜色值可以用red, 也可以用十六进制#f00写法,表示起始颜色与结束颜色;

   webkit颜色渐变语句:   

   -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*);

即:

   -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

   其中linear表示线性渐变,与moz不同的是它写在了函数里面,不过webkit又对其进行修改,可以跟moz一样写在外面:-webkit-linear-gradient(top, red, blue);

   其实我觉得旧的写法条理很清晰,而且可以定终端的点,上面的linear表示类型,是线性的渐变(可以是放射性radial),(0 0)表示左上角为起点(注:可用left top代替),(0 100%)表示左下角为终点(注:可用left bottom代替)

,然后从red颜色过渡到blue颜色.

   color-stop:

   一、上面的渐变是有起点到终点100%渐变的,那如果要红色只占8%的比例,蓝色占92%的比例该怎么办?

   background: -moz-linear-gradient(top

, red, blue 8%);

   background: -webkit-gradient(linear, 0 0, 0 8%, from(red), to(blue));

   则背景色会从0%到8%由红色到蓝色线性渐变,8%到100%为纯蓝色blue.

   二、那又如果,红色跟蓝色之间不渐变,直接切断,则从0%到8%为纯红色,8%到100%为纯蓝色该怎么办?

   background: -moz-linear-gradient(top

, red 8%, blue 8%);

   background: -webkit-gradient(linear, 0 8%, 0 8%, from(red), to(blue));

   这时候你会发现只有moz的会按照你想象的去渐变,但是webkit这句无效,蓝色不见了,如果硬要用这种写法去切断两种颜色的话,前面写成(0 7.99%)即可。

   这个是我在看这个网站http://mollar.me/的时候发现的,它的菜单背景用css写出来的,圆角+背景渐变,类似PS渐变叠加模拟玻璃质感的高反光做法,很赞.....

   三、要不然就用这种下面这种添加颜色:

   background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);

   background: -webkit-gradient(linear, 0 0, 0 100%, from(red), color-stop(8%, red), color-stop(8%, blue);

   color-stop可以用来添加颜色,让渐变不单只是两种颜色更绚丽,同时,如果颜色百分比一样的话,就切断颜色,从而实现(二)的效果。试试下面这个:

background:-webkit-gradient(linear,0% 0%,100% 0%,from(rgba(255,255,255,0.7)),color-stop(0.5,rgba(255,255,255,0.2),color-stop(0.5,rgba(255,255,255,0)),to(rgba(255,255,255,0.1))) #2A8BBE;

   IE渐变:

filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000');

   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000')";

   用滤镜来处理渐变。

CSS3,举例,线性渐变,相关的文章
有时间的话来看看IT界的突发事件