1-12. CSS 範例再練習 (依需求挑選學習)

#b1 { background: linear-gradient(skyblue, lightpink, lightgreen); }
/* 線性漸層, 預設由上至下的方向 */

#b1 { background: linear-gradient (to bottom right, skyblue, lightpink, lightgreen); }
/* 方向:由左上往右下 */

#b1 { background: linear-gradient(to right, skyblue, lightpink, lightgreen); }
/* 方向:由左往右 */

#b1 { background: linear-gradient(-90deg, skyblue, lightpink, lightgreen); }
/* 方向:-90度, 即順時針轉動, 漸層由右往左 */

#b1 { background: #b1 { background: repeating-linear-gradient(skyblue, lightpink 25%, lightgreen 50%); }
/* repeating重複漸層顏色 */

---

#b1 { background: radial-gradient(skyblue, lightpink, lightgreen); }
/* 以圓形向外呈現漸層顏色 */

#b1 { background: radial-gradient (closest-side at 80% 55%, skyblue, lightpink, lightgreen); }
/* closest-side at 指定圓心位置 */