CSS3透明背景+漸變樣式


CSS3透明背景+漸變樣式

轉載自博文:《CSS3透明背景+漸變樣式》 http://blog.csdn.net/netbug_nb/article/details/44343809
效果:


核心代碼如下:

  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. }  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM