CSS3 RGBA色彩模式使用实例讲解

RGBA色彩模式是RGB色彩模式的扩展，在红，蓝，绿三原色的基础上增加了不透明度参数。语法如下：

rgba（r,g,b,）

其中r,g,b表示红色，蓝色，绿色三种原色所占的比重。其值可以使整数或者百分数，正整数值的取值范围为0~255，百分数值的取值范围为0.0%~100.0%,超出范围的数值将被截止其最接近的取值极限。注意，并非所有的浏览器都支持使用百分数值。第四个参数表示不透明度，取值在0到1之间。

实例：设计带有阴影边框的表单

1.   
2.   
3.   
4.   
5.   
6.   
7. input, textarea {   
8.     padding: 4px;   
9.     border: solid 1px #E5E5E5;   
10.     outline: 0;   
11.     font: normal 13px/100% Verdana, Tahoma, sans-serif;   
12.     width: 200px;   
13.     background: #FFFFFF;   
14.     box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;   
15.     -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;   
16.     -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;     
17. }   
18. textarea {   
19.     width: 400px;   
20.     max-width: 400px;   
21.     height: 150px;   
22.     line-height: 150%;   
23.     background:url(images/form-shadow.png) no-repeat bottom right;   
24. }   
25. input:hover, textarea:hover, input:focus, textarea:focus { border-color: #C9C9C9; }   
26. label {   
27.     margin-left: 10px;   
28.     color: #999999;   
29.     display:block;   
30. }   
31. .submit input {   
32.     width:auto;   
33.     padding: 9px 15px;   
34.     background: #617798;   
35.     border: 0;   
36.     font-size: 14px;   
37.     color: #FFFFFF;   
38. }   
39.   
40.   
41.   
42.   
43.   
44.       
45.         姓名  
46.           
47.     
      
48.       
49.         邮箱       
50.           
51.     
      
52.       
53.         个人网址       
54.           
55.     
      
56.       
57.         留言  
58.           
59.     
      
60.       
61.           
62.     
      
63.   
64.   
65.   

演示效果：

以上就是本文的全部内容，希望对大家的学习有所帮助。