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);


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3