從蘋果的appstore談談web前端那絲毫的追求

獻上連接：點擊進入itunes


打開頁面，咱們先找到App 的logo圖

好比這個圖
很簡單的一個圖標，估計多數人選擇的是上傳一張處理好圓角，border的圖片做爲app logo，但問題是蘋果以爲，大家每一個人都本身去上傳logo，那統一性何在！

打開源代碼，咱們看到源代碼裏有個mask標籤，很納悶：

而後看mask標籤的css裏面有圖片，mask是絕對定位到一個總體的logo圖上的，遮住了正方形的logo從而造成了一種圓角的東西。

蘋果這樣作，難道只是爲了兼容ie低版本，兼容不支持圓角的瀏覽器？乍一看是這樣的，可是這是蘋果啊，蘋果怎麼會作那種東西；
咱們接着往下看：

#main #content div.lockup.application div.artwork>span.mask, .software #main #content div.lockup div.artwork>span.mask {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 177px;
height: 177px;
background: url(web-storefront/images/mask175.png) 0 0 no-repeat;
background-size: 175px 175px;
}

你們看到紅色這一句，這是css3屬性的東西，這東西ie低版本是不能兼容，這就引出了一個矛盾：

                  若是蘋果是爲了兼容而不用css3寫圓角，那麼爲什麼又用css3的background-size這屬性？

　　這是一個奇怪的矛盾，那咱們就無論，繼續找緣由。
     咱們用css3模擬一個出來，對比一下到底問題出如今哪？
   如圖：

細心的同窗會發現，不管咱們怎麼調試，也達不到原圖的效果，這是爲何呢？

咱們把原圖截圖下來，放到photoshop裏面放大了看看，效果以下

答案一目瞭然了，mask的背景圖，除了白色的四角，裏面還有一個內邊框，而這個內邊框是半透明的，當遮罩遮住圖片後，半透明的地方會讓圖片有透出的效果，這點css3是不能作到的。

謎底揭曉，瞬間輕鬆了許多。

蘋果不愧是個爲了追求完美而在任何一個細節上都去注意的公司

做爲web開發者，咱們也該本着一種追求極致的心態去完善本身的做品。

本文爲原創，轉載請註明。