[CSS] 手機版chrome背景圖(backgroun-size: cover)無法正常顯示

在html上使用background-image與background-size為cover設計全背景：

桌機上測試正常，但使用Android手機上Chrome直向瀏覽時，背景圖無法延伸至底部，
如下圖：

橫向瀏覽則正常，測試了一下，發現：
● background-size: cover：背景圖在mobile chrome就無法延伸至底部。
● background-attachment: fixed：在mobile chrome沒有生效。

google了一下，發現這似乎是mobile chrome的bug??
但直到目前，該問題依然存在，
常用的workaround是指定html的height為100%，如下圖：

測試結果如下圖：

參考資料：
https://support.google.com/chrome/forum/AAAAP1KN0B0l6BF3W0rymo/?hl=en&gpf=%23!topic%2Fchrome%2Fl6BF3W0rymo
https://issuetracker.google.com/issues/36908439
https://bugs.chromium.org/p/chromium/issues/detail?id=344338
https://css-tricks.com/perfect-full-page-background-image/

[CSS] 如何讓div element內的單行文字垂直置中(vertical center)

說明：
網頁上常用div element顯示區塊文字，水平置中可直接指定text-align:center，例：
<div style="text-align:center">test</div>
但文字垂直置中並沒有屬性可直接設定，
雖然有個vertical-align的屬性，不過是用在圖片置中上的...
那文字垂直置中該怎麼做?


作法：
答案是height跟line-height設一樣即可，例：
<div style="height:2vh;line-height:2vh">test</div>

不過為何這樣設定就可以讓文字垂直置中??
一般而言，line-height會大於font-size，
Content Area的高度由font-size決定，
 line-height扣掉font-size後的高度，會平均分配在Content Area的上面跟下面(half-leading)，
最後，line-height等於height，也就代表整個box的高度一致了。

參考資料：
https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css
https://stackoverflow.com/questions/8799164/how-does-line-height-vertically-center-text
https://www.slideshare.net/maxdesign/line-height

[CSS] box-shadow使用記錄

說明：想將網頁刻出一塊對比的版面，使用CSS3的box-shadow。


語法：
box-shadow: x y blur spread color inset;
x: 陰影水平位移距離，必要值。
y: 陰影垂直位移句離，必要值。
blur: 模糊強度，預設為0，不能負值。
spread: 擴散強度，預設為0。
color: 陰影顏色。
inset: 內陰影。

例：
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
搭配width: 來控制盒子寬度。
搭配margin: 控制盒子間隔。


參考資料：
http://boohover.pixnet.net/blog/post/35116159-%E9%99%B0%E5%BD%B1%E6%95%88%E6%9E%9C%E5%8F%8A%E5%85%89%E6%9A%88%E6%95%88%E6%9E%9C%E7%9A%84-box-shadow-(css-property)