1-10. 背景、顏色、邊框、陰影...再加強

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

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

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

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

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

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

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

#b4 { background: conic-gradient(red, Orange, Yellow, green, skyblue, Indigo, Purple); }
/* 以圓錐漸變呈現漸層顏色 */

#b4 { background: repeating-linear-gradient(30deg, #ddd, #ddd 10px, #eee 0, #eee 20px); }
/* 也可以運用重複的線性漸層製作成條紋背景 */

#b6 { border-radius: 30px; } /* 四周圓角半徑30像素 */

#b6 { border-radius: 50%; } /* 四周圓角半徑為寬高的50%, 正方形會變成正圓形 */

#b6 { border-top-left-radius: 50%; border-bottom-right-radius: 50%; }
/* 只有左上方及右下方設定50%的圓角 */

#b6 { border-radius: 50% 50% 0 0; }
/* 以 border-radius: 左上角 右上角 右下角 左下角; 可以同時設定不同數值的四個圓角 */

#b8 { border-radius: 50%; }

#b8 { border-image: url(./img/border1.png) 30 30 0 stretch; background-clip: border-box; }
/* 影像檔案   邊框圖向內偏移   邊框圖的寬度   邊框圖向外移動的距離   設定是延伸的/重複的; */
/* background-clip:border-box; 是預設值可省略不寫, 表示邊框處以內皆會呈現背景顏色 */
/* stretch為延伸式, round為重複式 */

#b8 { border-image: url(./img/border1.png) 30 30 round; }

#b8 { border-image: url(./img/border1.png) 30 30 round; background-clip: padding-box; }
/* padding-box 表示 padding 以內皆會呈現背景顏色, 邊框處不會呈現背景顏色 */

#b8 { border-image: url(./img/border1.png) 30 30 round; background-clip: content-box; }
/* content-box 表示只有內容區域會呈現背景顏色, 邊框與padding區不會呈現背景顏色 */

#b8 { border-image: url(./img/border2.png) 30 30 round; background-clip: padding-box; }

#b8 { border-image: url(./img/border3.png) 10 10 stretch; background-clip: padding-box; }

#b8 { border-image: url(./img/border4.png) 10 10 stretch; background-clip: padding-box; }