思洋互动网站建设学前班

4:以CSS3的方式修改不透明度

现在你可以按惯例编写几行代码来实现不透明度的效果(hack)。不过CSS3简化了这个流程。
广州网站建设,网站建设,广州网页设计,广州网站设计

这行代码很好记，仅仅是“opacity:value;”:

1. #opacity{  
2.  
3. background-color:#000;  
4.  
5. opacity:0.3;  
6.  
7. }  

5:阴影效果

实现阴影也有很多方法，最常用的就是使用Photoshop制作成阴影图片，然后应用到背景属性中。但CSS3让你的工作更有效率，不幸的是，目前只有Safari和Chrome支持这个新特性。

仅仅需要一行代码，不过它有4个不同的值:
广州网站建设,网站建设,广州网页设计,广州网站设计

-webkit-box-shadow:3px5px10px#ccc;

下面我来解释一下这四个值都代表什么，第一个3px是指定阴影与div元素之间的水平(横向)距离，第二个5px指的是阴影与div之间的垂直(纵向)距离，第三个10px指的是阴影的模糊度(类似于photoshop中的羽化)，值越大越细腻。最后的值不说大家也知道，就是阴影的颜色。

我们最终阴影效果代码;

1. #shadow{  
2.  
3. background-color:#fff;  
4.  
5. border:1pxsolid#000;  
6.  
7. -webkit-box-shadow:3px5px10px#ccc;  
8.  
9. }  

正如你看到的，我们个这个div设置了白色的背景，黑色的边框和亮灰色的阴影。