html+CSS3实现iOS7扁平化itunes图标

1、新建html文档。

2、书写hmtl代码。

<div class="wrapper">

<div class="icon itunes"></div>

</div>

3、初始化css代码。

<style>

html, body { width : 100%; height : 100%; margin : 0; padding : 0; }

.wrapper { position : relative; width : 420px; margin : 0 auto; padding : 0; font-size : 0; }

.icon { position : relative; display : inline-block; width : 100px; height : 100px; margin : 20px; border-radius : 18px; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; box-sizing : border-box; }

</style>

4、书写css代码。

.itunes { overflow : hidden; box-shadow : 0 0 0 1px rgba(156, 48, 255, 0.5) inset; background : -webkit-linear-gradient(top, #ff57c6 0%, #a542fd 100%); background : -moz-linear-gradient(top, #ff57c6 0%, #a542fd 100%); background : -ms-linear-gradient(top, #ff57c6 0%, #a542fd 100%); background : -o-linear-gradient(top, #ff57c6 0%, #a542fd 100%); background : linear-gradient(top, #ff57c6 0%, #a542fd 100%); }

.itunes:before { position : absolute; content : '\266B'; width : 100%; height : 100px; font-family : "Helvetica Neue", Helvetica, Arial; font-size : 56px; font-weight : bold; text-align : center; line-height : 100px; text-align : center; text-shadow : 0 0 1px #c238e7; color : #fff; -webkit-transform : scaleX(1.2); -moz-transform : scaleX(1.2); -ms-transform : scaleX(1.2); -o-transform : scaleX(1.2); transform : scaleX(1.2); }

.itunes:after { position : absolute; content : ''; width : 76px; height : 76px; top : 50%; left : 50%; margin : -42px 0 0 -42px; border : 4px white solid; border-radius : 84px; box-shadow : 0 0 1px 0 rgba(206, 66, 223, 0.8); }

5、代码整体结构

6、查看效果