google首頁的陰影為什麼不用樣式，反而要用圖片？

01-14

最近想用react.js+material UI 做一下Google的登入，然後用了paper的zDepth以後發現不管zDepth設置1還是2都和官網的登入的paper對不上
這是zDepth為1的paper

於是查看了一下源碼，發現了一句
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAAAGCAIAAABhDpMcAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkeFxks6YflLAAAAKlJREFUWMPt2CEShDAMheGmMCFV1MH9z8MtarC4QKfNiuwwOyxHeJ9r6iJ+ETKz3vu+7/M8D8MQAADetNaO41jXNcYYfUREpZRaK7YDAP9qraUUIvLn6NVg5t77tm2qamZYEwDciEhElmVhZm/H6B8ppZxzCOE8T4QDAB7hmKYp55xS+k48E601VVXV67oQDgB4hIOZRURE/BJKv5kwM1QDAF7bcR84Qggf4ShHovU/ogcAAAAASUVORK5CYII=)
對應的是
這麼一張圖片
大致作用就是在原來的基礎上假裝自己多了向Y偏移的陰影，這樣做有其必然性嗎？
因為我用CSS一樣可以做到同樣的效果

.Paper{ box-shadow: 0px 2px 1px #999999; }
以上是背景，那麼假設Google前端程序猿能夠用CSS完成的前提下，用圖片代替有什麼好處嗎?

補充一下，剛才去看了Google首頁，已經換成了直接使用 box-shadow 的方式，打開的瀏覽器為 chrome最新版

======================================

個人考慮了一下，覺得是兼容性問題。

Google的用戶群體非常龐大，要照顧到各類瀏覽器和各個版本的瀏覽器，所以兼容性是個大問題。

先來看看 box-shadow 的兼容性：

&> 以上為手機版本 Mobile

&> 以上為桌面版本 Desktop

可以看到，mdn 的兼容性表出 box-shadow 對 IE 瀏覽器的兼容性為 IE 9.0 開始支持，那麼，低版本是不支持這一屬性的（其他瀏覽器暫不比較）。同時請注意第二章截圖最下面的那句注釋[2] 提到了微軟給出的 filter 解決方案。

&> 注釋[2] 全文

所以可以看出，要想保證兼容性，使用 box-shadow 是不可行的。那我們再來看看 background-image 的兼容性：

&> background-image 兼容性表

剛才我們提到存在兼容性問題的 IE 瀏覽器，此時連第四版本（1997年）都支持了，而其他瀏覽器，chrome 和 Firefox 、Safari 自第一個版本就支持，而 Edge 自發布起就支持，另外 Opera 3.5 發佈於1998年11月，所以是沒有問題的（IE瀏覽器隨操作系統捆綁，用戶升級不容易，但是其他瀏覽器不同，用戶升級起來是很容易的，所以版本迭代中，舊版本用戶已經近似於不存在了）。

如果你注意觀察，會發現蘋果的郵件和谷歌的郵件中存在不少使用圖片來作陰影的地方，其原因應該是接近的，不過還應該考慮郵件客戶端兼容性的問題，此處就不再詳談了。

因為要兼容IE。就是這麼簡單- -

難道就我在覺得樓主要做釣魚站么？