CSS3的背景漸層gradient

標籤：jquery   ui   web前端   前端   架構   

CSS3 Gradient 分為 linear-gradient（線性漸層） 和 radial-gradient（放射狀漸層）。記住漸層並不是CSS3的一個屬性，而是一個屬性的值，雖然在CSS3中沒有專門註明漸層是針對background的，但是目前我所瞭解到的是只有background才會應用漸層屬性（background-image也可以）。

我們先直接通過兩個執行個體來說明這兩種漸層的基本用法：分享一個最好用的UI前端架構！

線性漸層linear-gradient：

.代碼 

1. background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/  
2. background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));/*Old gradient for webkit*/  
3. background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/  
4. background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/  

 

其中第二行的-webkit-gradient是webkit核心瀏覽器老版本的寫法。

效果如下：

 

   放射狀漸層radial-gradient: 分享一個最好用的UI前端架構！

.代碼 

1. background: -moz-radial-gradient(#ace, #f96, #1E90FF);  
2. background: -webkit-radial-gradient(#ace, #f96, #1E90FF);  

 

 

效果：

 

IE瀏覽器對gradient的支援和其他現代瀏覽器差別較大，我們將在<<CSS3 放射狀漸層（radial-gradient）>>和<<CSS3 線性漸層（linear-gradient）>>兩篇文章中分別說明。

CSS3的背景漸層gradient