關於css3漸變中顏色后面跟的百分比的含義:
背景:
background: repeating-linear-gradient(red, yellow 10%, green 20%);
有這么一個css規則,它的效果如下:


可以嘗試去更改一下這個百分比:
background: repeating-linear-gradient(red, yellow 60%, green 20%);


給人感覺就很奇怪,綠色去哪里了?
上網查了之后才知道,顏色后面跟的百分比是這個顏色值距離起點的開始位置,30%就是距離起點30%開始這個顏色。
那為什么綠色沒了?這種情況的定義是這樣的:
如果某個色標的位置值比整個列表中在它之前的色標的位置值都要小,則該色標的位置值會被設置為它前面所有色標位置值的最大值
也就是說如果一個顏色前面有比它百分比大的,那么它的顏色就會變成那個百分比最大的顏色,所以例子的綠色就變成了黃色。
不過在徑向漸變( radial-gradient)中卻有完全不一樣了。
在 radial-gradient 里面的百分比就完全是顏色的大小,而不是它的位置了。