Talk about the slightest quest for web front end from Apple's AppStore

Link: Click to enter itunes


Open the page, we first find the app logo map

Like this picture.
A very simple icon, estimated that most people choose to upload a good round corner, border image as the app logo, but the problem is Apple feel that each of you to upload the logo, that unity!

Open the source code, we see the source code has a mask tag, very puzzled:

Then look at the mask tag of the CSS inside there are pictures, mask is absolutely positioned to a whole logo on the map, covering the square logo to form a round corner of things.

Does Apple do this just to be compatible with the low version of IE, compatible with browsers that do not support rounded corners? At first glance this is the case, but this is Apple, how can apple do that kind of thing;
We then looked down:

#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;}

You see the red this sentence, this is the CSS3 property of something, this thing IE low version is incompatible, which leads to a contradiction:

If Apple is to be compatible without CSS3 to write round corners, then why use CSS3 's Background-size attribute?

This is a strange contradiction, then we don't care, continue to look for reasons.
We use the CSS3 simulation to come out, compare the question where does the problem appear?

Careful classmate will find, no matter how we debug, also can not reach the original effect, this is why?

We put the original image down and put it in Photoshop to enlarge it and see the effect as follows

The answer at a glance, mask background, in addition to the white Four corners, there is an inner border, and the inner border is translucent, when the mask obscured the picture, the translucent place will let the picture has the effect, this CSS3 can not be done.

The answer to the mystery, instant easy a lot.

Apple deserves to be a company that is looking for perfection in every detail.

As Web developers, we should also be in the pursuit of the ultimate mentality to improve their work.

This article is original, reprint please specify.