CSS3 Gradient-CSS3渐变

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主流内容主要有Mozilla(Gecko)(熟悉的有Firefox,Flock等浏览器)、WebKit(熟悉的有Safari、Chrome等浏览器)、Opera(presto)(Opera浏览器)、Trident(讨厌的IE浏览器)。本文照常忽略IE不管,我们主要看看在Mozilla、Webkit、Opera下的应用,当然在IE下也可以实现,他需要通过IE特有的滤镜来实现,在后面会列出滤镜的使用语法,但不会具体介绍如何实用,感兴趣的可以搜索相关技术文档。那我们了解了这些,现在就开始今天的主题吧。

线性渐变在Webkit下的应用

background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000)); //有5个属性(老式写法)
background: -webkit-linear-gradient(top,#ccc,#000);//(新式写法) 其中可以写多个颜色的渐变


线性渐变在Mozilla下的应用
background: -moz-linear-gradient( top,#ccc,#000);


【CSS3 RGBA】
语法:

R:红色值。正整数 | 百分数

G:绿色值。正整数 | 百分数

B:蓝色值。正整数| 百分数

A:透明度。取值0~1之间 (1表示无透明度,0表示透明度为100%·即完全透明)

取值:

<length> :Hue(色调)。 0(或360)表示红色,120表示绿色,240表示蓝色,当然可取其他数值来确定其它颜色;

<percentage> :Saturation(饱和度)。 取值为0%到100%之间的值;

<percentage> :Lightness(亮度)。 取值为0%到100%之间的值;

<opacity> :alpha(透明度)。 取值在0到1之间;

【CSS3的圆角Border-radius】

 
原文地址:https://www.cnblogs.com/xs-yqz/p/4396799.html