CSS3透明背景+渐变样式

CSS3透明背景+渐变样式

转载自博文：《CSS3透明背景+渐变样式》 http://blog.youkuaiyun.com/netbug_nb/article/details/44343809

效果：

核心代码如下：

[css] view plain copy

1. .map-interview {  
2.     background-image:-webkit-linear-gradient(  
3.     to right,   
4.     rgba(0,0,0,0) 0%,   
5.     rgba(0,0,0,0.4) 5%,   
6.     rgba(0,0,0,0.6) 10%,   
7.     rgba(0,0,0,0.6) 90%,   
8.     rgba(0,0,0,0.4) 95%,   
9.     rgba(0,0,0,0) 100%);  
10.   background-image: linear-gradient(  
11.     to right,   
12.     rgba(0,0,0,0) 0%,   
13.     rgba(0,0,0,0.4) 5%,   
14.     rgba(0,0,0,0.6) 10%,   
15.     rgba(0,0,0,0.6) 90%,   
16.     rgba(0,0,0,0.4) 95%,   
17.     rgba(0,0,0,0) 100%);  
18.   height: 220px;  
19.   left: 50%;  
20.   margin-left: -350px;  
21.   margin-top: -110px;  
22.   padding: 10px 0px 10px 30px;   
23.   position: absolute;  
24.   top: 30%;  
25.   width: 700px;  
26.   border: 1px solid rgba(0, 0, 0, 0.1);  
27. }