从苹果的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开发者，咱们也该本着一种追求极致的心态去完善本身的做品。

本文为原创，转载请注明。