CSS漸變是一種非常流行的設計技巧，可以為我們的頁面帶來更加豐富的色彩與立體感。而其中，按照百分比進行漸變則是一種經典方法，下面就來詳細探討一下吧。

/* 漸變顏色代碼 */
background: linear-gradient(to right, 
#ff0000 0%, #ff0000 20%, 
#ffff00 20%, #ffff00 40%, 
#00ff00 40%, #00ff00 60%, 
#0000ff 60%, #0000ff 80%, 
#ff00ff 80%, #ff00ff 100%
);

上面這段代碼實現了一個線性漸變效果，沿著水平方向，分別從紅色到黃色、從黃色到綠色、從綠色到藍色、從藍色到紫色。如果我們將這段代碼分解一下：

/* 漸變顏色代碼 */
background: linear-gradient(to right, 
#ff0000 0%,          /* 起始紅色，0%處 */
#ff0000 20%,         /* 20%處還是紅色 */
#ffff00 20%,         /* 20%到40%之間變成黃色 */
#ffff00 40%,         /* 40%處還是黃色 */
#00ff00 40%,         /* 40%到60%之間變成綠色 */
#00ff00 60%,         /* 60%處還是綠色 */
#0000ff 60%,         /* 60%到80%之間變成藍色 */
#0000ff 80%,         /* 80%處還是藍色 */
#ff00ff 80%,         /* 80%到100%之間變成紫色 */
#ff00ff 100%         /* 結束紫色，100%處 */
);

可以看到，我們使用的是線性漸變（linear-gradient），并且設置了漸變方向為從左到右（to right）。然后，在括號中，根據需要設置了不同的顏色和位置，這里的顏色可以是十六進制、RGB、RGBA等格式的值，位置則是百分比數值，表示該顏色在漸變區域中所占的百分比。

另外，上面這段代碼也可以簡化為：

/* 漸變顏色代碼 */
background: linear-gradient(to right, 
red, red 20%, 
yellow 20%, yellow 40%, 
lime 40%, lime 60%, 
blue 60%, blue 80%, 
fuchsia 80%, fuchsia 100%
);

這樣寫的話，就不需要再寫顏色的具體值了，直接使用顏色名稱即可。

總體來說，使用百分比進行漸變還是比較靈活的，可以控制漸變的精細程度，也可以實現更加復雜的效果。如果您有需要，可以多嘗試一下。