CSS3 makes a beautiful iphone phone icon without using a picture

<! DOCTYPE html>
<meta charset=utf-8>
&LT;TITLE&GT;CSS3 Perfect for iphone phone icons </title>
<style>
*{margin:0px;padding:0px;}
Body{background: #b1b1b1; Margin:0px;padding:0px;font-size:14px;color: #000;}
. Icon {width:56px;height:56px;z-index:10;position:absolute;left:50%;top:50%;margin-left: -28px;margin-top: -28px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:rgba (0,0,0,0.5) 0 1px 2px;
-moz-box-shadow:rgba (0,0,0,0.5) 0 1px 2px;
Box-shadow:rgba (0,0,0,0.5) 0 1px 2px;
}
. Icon span {
Display:block;text-align:center;font:bold 11px/15px "Helvetica Neue", Arial, Helvetica, Geneva, Sans-serif;color: #fff ;p osition:absolute;top:58px;left: -10px;width:76px;
Text-shadow:rgba (0,0,0,0.3) 1px 2px 1px;
Text-transform:capitalize;
}
. i_phone {
width:100%;height:100%;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
position:relative;
Overflow:hidden;
Cursor:pointer;
Background:-webkit-linear-gradient (Top, #015801, #06f700);
Background:-moz-linear-gradient (Top, #015801, #06f700);
Background:-ms-linear-gradient (Top, #015801, #06f700);
Background:-o-linear-gradient (Top, #015801, #06f700);
Background:linear-gradient (Top, #015801, #06f700);
-ms-filter:progid:dximagetransform.microsoft.gradient (startcolorstr= ' #015801 ', endcolorstr= ' #06f700 ', gradienttype=0);
Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #015801 ', endcolorstr= ' #06f700 ', gradienttype=0 );
}

. I_phone. bg_angled {
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
width:125%;
height:125%;
Position:absolute;
Left: -7px;
Top: -7px;
-WEBKIT-BACKGROUND-SIZE:4PX 4px;
-MOZ-BACKGROUND-SIZE:4PX 4px;
-MS-BACKGROUND-SIZE:4PX 4px;
-O-BACKGROUND-SIZE:4PX 4px;
BACKGROUND-SIZE:4PX 4px;
Background-color:none;
Background-image:-webkit-linear-gradient (Top, RGBA (255, 255, 255,. 2) 0, Rgba (255, 255, 255,. 2) 50%, transparent 50%, t Ransparent 100%);
Background-image:-moz-linear-gradient (Top, RGBA (255, 255, 255,. 2) 0, Rgba (255, 255, 255,. 2) 50%, transparent 50%, Tran Sparent 100%);
Background-image:-ms-linear-gradient (Top, RGBA (255, 255, 255,. 2) 0, Rgba (255, 255, 255,. 2) 50%, transparent 50%, trans Parent 100%);
Background-image:-o-linear-gradient (Top, RGBA (255, 255, 255,. 2) 0, Rgba (255, 255, 255,. 2) 50%, transparent 50%, TRANSP Arent 100%);
Background-image:linear-gradient (Top, RGBA (255, 255, 255,. 2) 0, Rgba (255, 255, 255,. 2) 50%, transparent 50%, Transpare NT 100%);
-webkit-transform:rotate ( -45DEG);
-moz-transform:rotate ( -45DEG);
-ms-transform:rotate ( -45DEG);
-o-transform:rotate ( -45DEG);
Transform:rotate ( -45DEG);
}

. i_phone:after{
Content: ";
-webkit-box-shadow:inset #06f700 0 0 2px;
-moz-box-shadow:inset #06f700 0 0 2px;
Box-shadow:inset #06f700 0 0 2px;
width:100%;
height:100%;
Position:absolute;
Display:block;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
Z-index:2;
}

. i_phone:before{
Content: ";
width:100%;
height:50%;
Position:absolute;
Display:block;
-webkit-border-radius:10px 10px 50% 50%/10px 10px 5px 5px;
-moz-border-radius:10px 10px 50% 50%/10px 10px 5px 5px;
border-radius:10px 10px 50% 50%/10px 10px 5px 5px;
Background:rgba (255,255,255,0.5);
Z-index:5;
-webkit-box-shadow:inset Rgba (255,255,255,0.5) 0 1px 0;
-moz-box-shadow:inset Rgba (255,255,255,0.5) 0 1px 0;
Box-shadow:inset Rgba (255,255,255,0.5) 0 1px 0;
}

. I_phone. Truba {
Position:absolute;
top:7px;
left:5px;
Z-index:1;
width:40px;
height:40px;
Font:bold 40px/40px "Helvetica Neue", Arial, Helvetica, Geneva, Sans-serif!important;
Color: #f1f5f9;
-webkit-transform:rotate (90DEG);
-moz-transform:rotate (90DEG);
-ms-transform:rotate (90DEG);
-o-transform:rotate (90DEG);
Transform:rotate (90DEG);
Text-shadow:rgba (0,0,0,0.5) 0 0 2px;
}

. I_phone. Truba:after {
Content: ";
Position:absolute;
width:12px;
height:10px;
top:2px;
left:25px;
Background: #f1f5f9;
-webkit-border-radius:50%/2px 2px 6px 2px;
-moz-border-radius:50%/2px 2px 6px 2px;
border-radius:50%/2px 2px 6px 2px;
-webkit-transform:rotate ( -57DEG);
-moz-transform:rotate ( -57DEG);
-ms-transform:rotate ( -57DEG);
-o-transform:rotate ( -57DEG);
Transform:rotate ( -57DEG);
}

. I_phone. truba:before {
content: ';
Position:absolute;
width:12px;
height:10px;
top:24px;
left:4px;
Background: #f1f5f9;
-webkit-border-radius:50%/2px 2px 2px 6px;
-moz-border-radius:50%/2px 2px 2px 6px;
border-radius:50%/2px 2px 2px 6px;
-webkit-transform:rotate ( -25DEG);
-moz-transform:rotate ( -25DEG);
-ms-transform:rotate ( -25DEG);
-o-transform:rotate ( -25DEG);
Transform:rotate ( -25DEG);
}

. i_phone. Truba B {
Position:absolute;
width:35px;
height:4px;
top:17px;
left:7px;
Background: #f1f5f9;
border-radius:0 0 5px 5px;
-webkit-transform:rotate ( -47DEG);
-moz-transform:rotate ( -47DEG);
-ms-transform:rotate ( -47DEG);
-o-transform:rotate ( -47DEG);
Transform:rotate ( -47DEG);
}
</style>
<body>
<div>http://www.999jiujiu.com/</div>
<div class= "icon" >
<div class= "I_phone" >
<div class= "bg_angled" ></div>
<div class= "Truba" ><b></b></div>
</div>
<span>Phone</span>
</div>
</body>

CSS3 makes a beautiful iphone phone icon without using a picture