css绘制图像文字加阴影

<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3</title>
<style>
*{margin:0px;padding:0px;}
body{background:#e7e8e3;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 "Arial","\5B8B\4F53";color: #6b6b6b;position: absolute;top: 58px;left: -10px;width: 76px;
    text-shadow: rgba(255,255,255,0.3) 1px 1px 1px;
    text-transform: capitalize;
}
.span1 {text-align: center;font: normal 12px/24px "Arial","\5B8B\4F53";color: #6b6b6b;width: 800px;
    text-shadow: rgba(255,255,255,1) 1px 1px 1px;text-transform: capitalize; margin:500px 0 0 100px;}
.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 >
    <div >
        <div ></div>
        <div ><b></b></div>
    </div>
    <span>Phone</span><br>
</div>
    <p >
【IT168 资讯】今天新鲜出炉的Chromium版本里有了一大变化，就是开发者工具加入了CSS颜色选取器，这样设计师就更方便选取颜色来用了，估计很多网页设计师
http://software.it168.com/a2012/0222/1315/000001315062.shtml 2012-02-22 - 出处 software.it168.com
Chrome浏览器将添SVG和CSS GPU加速功能
; Chrome 18浏览器内建开关选项，让消费者选择使用GPU硬件加速基于矢量的SVG图形和CSS过滤器，让Chrome浏览器在未来网页显示上获得突破性速度，并且达成惊人的视觉效果
http://software.it168.com/a2011/1230/1296/000001296473.shtml 2011-12-31 - 出处 software.it168.com
Chrome新突破 添加SVG/CSS显卡加速功能
18浏览器内建开关选项，让消费者选择使用GPU硬件加速基于矢量的SVG图形和CSS过滤器，让Chrome浏览器在未来网页显示上获得突破性速度，并且达成惊人的视觉效果。Chrome的SVG和CSS
http://vga.it168.com/a2011/1230/1296/000001296454.shtml 2011-12-30 - 出处 vga.it168.com
使用HTML5/CSS3快速制作便签贴特效页面
【IT168技术】本篇文字将展示给你的是，如何利用HTML5/CSS3，仅用5步就可以制作便签贴效果的HTML页面，效果图如下：(注：图里的文字纯属杜撰，搞笑目的，如有雷同，纯属巧合
http://tech.it168.com/a2011/1215/1289/000001289011.shtml 2011-12-15 - 出处 tech.it168.com
HTML5和CSS3的新交互性盘点：炫酷体验</p>
</body>
</html>