Yakim shu Hi, 這是我擴充腦內海馬體的地方。
【學習】CSS3 漸層 background pattern
網路上很多很酷的CSS3漸層範例，
應用的層面很廣，可以作圓點、斜線、格紋…各種花樣，把比較實用的類型挑出來當範例 。
基本-圓點
background: radial-gradient(#ff8da1 30%, pink 34%);
background-size: 30px 30px;
背景色要比圓點多1~5%，視background-size而定
※ background-size越小，%數差距要越多
→ 差距太小：邊緣會有鋸齒
→ 差距太大：邊緣會模糊
基本-線條
background: linear-gradient(90deg, lightblue 50%, #dceef4 0%);
background-size: 30px 30px;
橫條紋：0deg
斜線並不是45deg，要用其他方法
格紋
background-color: #86c5da;
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 50%, transparent 50%), linear-gradient(rgba(255, 255, 255, 0.3) 50%, transparent 50%);
background-size: 25px 25px;
其實可以變花很多花樣，但要調整可能要多花心思才不會跑版，可以打開上面的demo來修改初自己想要的樣式。
Written on November 9th, 2016 by Yakim shuFeel free to share!