<gradient>

語法:

說明:

<gradient> 允許使用簡單的語法實現顏色漸變,以便UA在渲染頁面自動建立圖片。
  • 漸變在一個擁有尺寸的盒子中被建立,被稱之為漸變盒,但是漸變本身並沒有內在的尺寸,也就說如果在一個沒有尺寸的容器上定義漸變,將無法被呈現。
  • <gradient> 可以應用在所有接受圖片的屬性上

    示例:

    background-image: linear-gradient(white, gray); list-style-image: radial-gradient(circle, #006, #00a 90%, #0000af 100%, white 100%);

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
6.0-9.0 2.0-3.5 4.0-9.0
-webkit-
3.1-3.2 15.0+ 3.2-4.3
-webkit-
2.1-3.0
-webkit-
10.0-25.0
-webkit-
10.0+ 3.6-15.0
-moz-
10.0-25.0
-webkit-
4.0-5.0
-webkit-
5.0-6.1 4.0-4.3
-webkit-
26.0+
16.0+ 26.0+ 5.1-6.0
-webkit-
7.0+ 4.4+
6.1+