CSS3透明漸變是CSS3中最常用的特性之一。通過透明漸變,我們可以在網頁設計中制作出更加炫酷、創意的效果。
#grad { background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); }
上面的代碼展示了如何創建一個從上到下的透明漸變效果。我們可以根據需要調整漸變的方向、透明度、顏色等參數來達到不同的效果。比如下面的代碼展示了一個從左到右的漸變效果:
#grad { background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); }
除了線性漸變,CSS3還支持徑向漸變等其他類型的漸變效果。比如下面的代碼展示了一個從中心點向外擴散的徑向漸變效果:
#grad { background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); }
總之,透明漸變是網頁設計中非常重要的一個特性,我們可以通過它實現更加創意、炫酷的效果。
上一篇css100個經典款
下一篇CS6的css定義