CSS3实例教程:CSS3下拉菜单代码解析

武林网(www.vevb.com)文章简介：CSS3实例教程:CSS3下拉菜单代码解析.

上个星期我发布了一篇CSS3下拉菜单，有人反映说我将CSS代码解释的不够详细。那么，这篇文章将会对新的CSS属性作出解释，包括：text-shadow，box-shadow和border-radius。这些CSS3属性是最常用到的，了解它们准没错。

RGBA

前三个值是RGB颜色值，最后一个值表示透明程度（0代表完全透明，1代表完全不透明）。

RGBA可以应用于任何设计颜色的属性，例如文字颜色、边框颜色、背景颜色、阴影颜色等等。

文字阴影

文字阴影按照如下顺序组织：x-offset，y-offset，blur，color；

将x-offset设置为负数值会将阴影向左边移动。将y-offset设置为负数值会将阴影向上面移动。不要忘记你还可以给阴影颜色应用RGBA值。

你还可以给文字应用一系列的文字阴影（使用逗号隔开）。下面的例子使用了两个文字阴影声明创建出文字嵌入的效果（顶部1个像素和底部1个像素）。

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

边框半径（译者注：圆角效果）

边框半径的简写方式和内边距以及外边距很相似（例如：border-radius:20px;）。为了使浏览器能够渲染边框半径，需要给以webkit为内核的浏览器在属性前加上”-webkit”，给Firefox浏览器加上”-moz-”。

你可以给每一个角应用不同的值。要注意webkit浏览器和Firefox在角的名称的写法上不同。

盒模型阴影

盒模型阴影的属性顺序和文字阴影属性的顺序相似：x-offset，y-offset，blur和color。

和前面一样，你可以应用多个盒阴影。下面的例子是三个盒阴影的声明列表。

-moz-box-shadow:

-2px -2px 0 #fff,

2px 2px 0 #bb9595,

2px 4px 15px rgba(0,0,0, .3);