圓、橢圓漸層CSS語法簡述與使用心得

漸層是一種特殊形式的<image>，以「圖片」形式存在，實作於 background-image。此篇著重於圓及橢圓漸層的設定。

語法

radical-gradient(SHAPE SIZE at POSITION, LIST)

SHAPE：size不指定時，預設值circle
值為circle /ellipse。若有指定SIZE數值，則：circle需對應一組數值、ellipse兩組數值。

SIZE:

1. 一組或兩組<length>，只有一組則預設SHAPE預設為circle，兩組則預設SHAPE為ellipse。如果SHAPE和SIZE的值沒有互相對應好，則會導致該串語違法而失效。
   <length>包含
1. 數值（數字+px/rem等單位） 
2. percentage
2. 特殊值：closest-side、farthest-side、closest-corner、farthest-corner。
   會和POSITION的值互相作用，進而影響漸層橢圓長短軸的實際長度，請見下方詳述。

POSITION：預設值center

1. 單值：left/ center/ right/ top / bottom，
2. 雙值：X-AXIT Y-AXIT
1. X-AXIT:left/ center/ right/ percentage
2. Y-AXIT:top / center / bottom/ percentage

LIST：color <length/percentage>, color <length/percentage> ...

筆記

1. 當SIZE採用closest-side、farthest-side、closest-corner、farthest-corner四者任一值且POSITION設定變動時，會影響長度相對變化。例如POSITION位於側邊且SIZE採用closest-side時，圓心與最近邊的距離，將比圓心在center時還短，致使圓周變短。
   如果layout習慣是先確定大小與漸層顏色，再移動到特定位置，則上述特性會導致半徑大小不如預期。若要將某放射圓移動至背景某處且保持先前設定完畢的漸層大小，理想方式是回歸其<image>的本質，以background-position移動該漸層。如此一來就能跳過radial-gradient自身語法互相干擾的硬傷。
2. MDN上的介紹
   因為Formal syntax值的命名寫得有點太長，導致語法邏輯有點難讀，就自己筆記了個簡略的。該篇文章中還有個小陷阱（？）：章節「Syntax」的<ending-shape>和章節「Formal syntax」的<radial-shape>兩者指稱為同一物，即上述簡述中的SHAPE
3. background-image中，愈先宣告的圖片，圖層層級愈高。使用上要注意。