CSS3制作精美的iphone电话图标，不使用图片

<!DOCTYPE HTML>

<html lang=zh-cn>

<head>

<meta charset=utf-8>

<title>CSS3完美实现iphone电话图标</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;position: 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%,  transparent 100%);

    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%,  transparent 100%);

    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%,  transparent 100%);

    background-image: -o-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%,  transparent 100%);

    background-image: linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%,  transparent 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>

</head>

<body>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></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>

</html>