html opacity 颜色,HTML CSS3的阴影(框、文本)、opacity属性和RGBA颜色

框阴影(box-shadow)：需要三个样式申明来创建。

eg:

-webkit-box-shadow : 5px 5px 5px #828282;

-moz-box-shadow : 5px 5px 5px #828282;

box-shadow : 5px 5px 5px #828282;

第一个值：阴影水平偏移的像素值。正数在右侧显示阴影，负数在左侧显示阴影。

第二个值：阴影垂直偏移的像素值。正数在下方显示阴影，负数在上方显示阴影。

第三个值：迷糊半径的像素值。值越大越模糊。值0配置锐利的阴影。

第四个值：有效颜色值。

文本阴影(text-shadow)

eg:

text-shadow : 3px 3px 3px #666;

第一个值：阴影水平偏移的像素值。正数在右侧显示阴影，负数在左侧显示阴影。

第二个值：阴影垂直偏移的像素值。正数在下方显示阴影，负数在上方显示阴影。

第三个值：迷糊半径的像素值。值越大越模糊。值0配置锐利的阴影。

第四个值：有效颜色值。

opacity属性：配置背景颜色的透明度。值从0(完全透明)到1(完全不透明)。

注意：IE8以前的IE浏览器不支持opacity，配filter属性，值为1(透明)到100(完全不透明)之间的opacity级别。eg:

filter:alpha(opacity=60);

所以我们一般如下这样设置透明度

opacity：.0.6;

filter:alpha(opacity=60);

RGBA颜色：红、绿、蓝、透明(alpha)，红绿蓝必须为0到255的十进制值，alpha必须为0(完全透明)到1(完全不透明)之间的数字。由于不是所有的浏览器都支持RGBA颜色，所有要配置color属性两次。第一次：配置当前浏览器都支持的标准颜色值(RGB)。第二次：配置RGBA颜色。较旧的浏览器不理解RGBA颜色会自动忽略它。较新的；浏览器会“看见”两个颜色声明，会按照编码顺序应用。

eg:

h1{

color : #ffffff;

color :

rgba(255,255,255,0.8);==color：#ffffff; opacity : 0.8;

text-align : right;

}

CSS的渐变：

CSS是“渐进性增强”，要配置一个后备的background-color属性或者background-image属性。

eg:

首先配置一个背景颜色(用于不支持渐变的浏览器)，在配置一个线性渐变，从白色(#FFFFFF)到中蓝色(#8FA5CE)

background-color : #8FA5CE;

background-image : -webkit-grdient(linear,left top,left

bottom,from(#FFFFFF),to(#8FA5CE));

background-image :

-moz-linear-gradient(top,#FFFFFF,#8FA5CE);

filter:progid :

DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF,endColorstr=#FF8FA5CE);

background-image : linear-gradient(#FFFFFF,#8FA5CE);