当前位置: 网站建设 > 网页设计 > 建站经验 >

详解CSS3线性渐变

时间:2013-03-02 04:15来源:未知 作者:admin 点击:

标签:详解CSS3线性渐变 详解(47)线性(1)变为(1)渐变(5)我们(51)CSS3(105)实现(100)
CSS3中实现CSS3线性渐变为我们提供了便利。只管Mozilla和Webkit通常对CSS3属性采用同样的语法,但是对于渐变,他们很可怜的不能达成一致。Webkit是第一个支持渐变的浏览器内核,它使用下面的构造: PS:事实上,我们在《RGBa颜色的浏览器支持》提到的IE的解决办法,就是使用这个渐变滤镜。 background: white; /* fallback for older/unsupporting browsers */ background: -moz-linear-gradient(t
详解CSS3线性渐变》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/030234X62013.htm

CSS3中实现CSS3线性渐变为我们提供了便利。只管Mozilla和Webkit通常对CSS3属性采用同样的语法,但是对于渐变,他们很可怜的不能达成一致。Webkit是第一个支持渐变的浏览器内核,它使用下面的构造:

PS:事实上,我们在《RGBa颜色的浏览器支持》提到的IE的解决办法,就是使用这个渐变滤镜。

background: white; /* fallback for older/unsupporting browsers */ 
background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);  
background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red); 

渐变的类型? (linear) 渐变开始的X Y 轴坐标(0 0 – 或者left-top) 渐变结束的X Y 轴坐标(0 100% 或者left-bottom) 开始的颜色? (from(red)) 结束的颜色? (to(blue)) Mozilla

IE并不支持CSS渐变,然而供给了渐变滤镜,可以实现最简略的渐变后果:

Firefox,从3.6版本才开始支持渐变,更爱好和Webkit稍微不同的语法。

在从前,尺度的做法就是制造一个图片,并将其设为一个元素的背景图片,而后让其程度平铺。然而使用CSS3,这是个小Case。

如果你不需要从一个颜色到另一个颜色的100%渐变怎么办,详解CSS3 transform?这就是color stop起作用的时候了。一个广泛的设计技巧是使用一个较短而轻微的渐变,好比:

如果我们想要增加多一种(多少种)颜色,我们可以这样做:

请注意我们将渐变的类型——linear——放到了属性前缀中了 渐变从哪里开始? (top – 我们也能够应用度数,比方-45deg) 开端的色彩? (red) 停止的颜色? (blue) Color-Stops 对-moz 版本,我们定义,从元素的20%的高度的处所开始是红色。 而对于-webkit,我们使用color-stop,采取两个参数:哪里开始结束,使用哪种颜色。 IE

background: white; /* fallback for older/unsupporting browsers */ 
background: -moz-linear-gradient(top, #dedede, white 8%);  
background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white));  
border-top: 1px solid white; 

对于CSS渐变的一些要点: 尽可能的使用它。假如让IE用户看到一个固定的纯色,我激励你使用这种方式; IE6/7/8, Opera, Safari 3, 跟Firefox 3 不能渲染CSS3 渐变,Firefox 和Safari用户通常常常升级浏览器,而Chrome的主动升级机制会在后盾自动进级,所以这并不是个大问题; 老是为不支撑这些浏览器私有属性的浏览器利用一个默认的,纯色背景; 永远不要使用红色到蓝色的渐变,就像我用作例子的这种; 页面毋庸在每个阅读器里面看起来完整一样! Firefox可以使用角度来设定渐变的方向,而webkit只能使用x和y轴的坐标。 Tag:线性渐变   CSS3   线性渐变   CSS3  

/* Syntax, taken from: */ 
 -moz-linear-gradient( [<,详解CSS3 text-shadow;point> || <angle>,]? <stop>, <stop>,详解CSS3 box-shadow; [, <stop>]* )  
 
/* In Practice */ 
background: -moz-linear-gradient(top, red, blue); 

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

留神顶部的浅灰色到白色的渺小的渐变

不要担忧这些语法会让你看花眼,我也是这样的!只有记得咱们须要用一个逗号来隔开这个参数组。

/* Syntax, taken from: */ 
-webkit-gradient(<type>, <point> [, <radius>]?, <,详解CSS3 border-radius;point> [, <radius>]? [, <stop>]*)  
 
/* In practice... */ 
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue)); 

--> [网站建设之]详解CSS3线性渐变

这次,详细讲解CSS Overflow属性,我们让渐变结束于8%,而不是默认的100%。请注意我们也在头部采用了一个边框,以构成对照。这很常用。


(责任编辑:网站建设)
详解CSS3线性渐变相关文章
上一篇:详解CSS3 transform 下一篇:详解CSS中background(背景)属性的语法
回到顶部