body {    font: 12px Tahoma,arial,sans-serif;    margin: 0;    padding: 0;}#mask {    left: 0;    opacity: 0.2;    position: absolute;    top: 0;}header {    color: #666;    font-family: ‘Segoe UI Light‘,‘Segoe UI‘,‘Microsoft Jhenghei‘,‘微软雅黑‘,sans-serif;    font-size: 50px;    margin-top: 50px;    text-align: center;}.con {    display: block;    height: 400px;    margin: 30px auto 0;    position: relative;    width: 840px;}#qq,#qqnv{    display: block;    height: 400px;   float:left;    position: relative;    width: 420px;}.headflower {    background: none repeat scroll 0 0 ;    /*border: 1px solid #fb0009;*/    /*border-radius: 117px / 117px 117px 68px 68px;*/        position: absolute;    top: -20px;     left: 210px;    width: 108px;  height: 65px;     z-index: 100;}.hdj1 {    background: none repeat scroll 0 0 #FF59A1;    border: 1px solid #000;       border-top-left-radius:80%;    border-top-right-radius:50%;    border-bottom-left-radius: 50%;    border-bottom-right-radius:50%;    width:30px;    height:45px;    position:absolute;    left:0px;top:0px;    transform: rotate(-50deg);    transform-origin:      50% 50% 0;     z-index:10;}.hdj2 {    background: none repeat scroll 0 0 #FF59A1;    border: 1px solid #000;       border-top-left-radius:50%;    border-top-right-radius:50%;    border-bottom-left-radius:80% 30px;    border-bottom-right-radius:10px;    width:30px;    height:45px;    position:absolute;    left:10px;top:0px;    transform: rotate(60deg);    transform-origin: -30% 50% 0;     z-index:10;}.hdj3 {    background: none repeat scroll 0 0 #FF59A1;    border: 1px solid #000;       border-top-left-radius:50%;    border-top-right-radius:50%;    border-bottom-left-radius: 50%;    border-bottom-right-radius:50%;    width:30px;    height:45px;    position:absolute;    left:50px;top:0px;    transform: rotate(50deg);    transform-origin: 50% 50% 0;    z-index:10;}.hdj4 {    background: none repeat scroll 0 0 #FF59A1;    border: 1px solid #000;       border-top-left-radius:50%;    border-top-right-radius: 10px;    border-bottom-left-radius: 50%;    border-bottom-right-radius:50%;    width:30px;    height:45px;    position:absolute;    left:50px;top:20px;    transform: rotate(100deg);    transform-origin: 50% 50% 0;    z-index:10;}.hdj{    background: none repeat scroll 0 0 #FF59A1;    border: 1px solid #000;    /*border-radius: 117px / 117px 117px 68px 68px;*/    border-top-left-radius:80% 33px;    border-top-right-radius:20px;    border-bottom-left-radius:20px 33px;    border-bottom-right-radius:10px;    width:25px;    height:30px;    position:absolute;    left:30px;top:15px;     z-index:100;}.head {    background: none repeat scroll 0 0 #000;    border: 1px solid #000;    border-radius: 117px / 117px 117px 68px 68px;    height: 185px;    left: 96px;    position: absolute;    top: 18px;    width: 234px;    z-index: 10;}.eye {    background: none repeat scroll 0 0 #fff;    border: 1px solid #000;    border-radius: 50%;    height: 66px;    position: absolute;    width: 44px;}/*女qq*/.eyenv {     /*background: none repeat scroll 0 0 #fff;*/    background: -moz-linear-gradient(left center , #FF59A1, white 50%, #FF59A1) repeat scroll 0 0 rgba(0, 0, 0, 0);    border: 1px solid #000;    border-radius: 50%;    height: 66px;    position: absolute;    width: 44px;}.eye2{    background: none repeat scroll 0 0 #fff;       border-radius: 50%;    height: 55px;    position: absolute;  left: 0;  bottom: 0;    width: 44px;}.left.eye {    left: 62px;    top: 50px;}.right.eye {    left: 123px;    top: 50px;}/*女qq*/.left.eyenv {    left: 62px;    top: 50px;}.right.eyenv {    left: 123px;    top: 50px;}.innerLeftEye {    background: none repeat scroll 0 0 #000;    border: 1px solid #000;    border-radius: 50%;    height: 24px;    left: 20px;    position: absolute;    top: 20px;    width: 18px;}.innerLeftEyenv {    background: none repeat scroll 0 0 #000;    border: 1px solid #000;    border-radius: 50%;    height: 24px;    left: 20px;    position: absolute;    top: 10px;    width: 18px;}.innerLeftEye:after,.innerLeftEyenv:after {    background: none repeat scroll 0 0 white;    border-radius: 50%;    content: "";    height: 8px;    left: 9px;    position: absolute;    top: 6px;    width: 6px;    z-index: 11;}.innerRightEye {    background: none repeat scroll 0 0 black;    border-radius: 50% / 90% 90% 10% 10%;    box-shadow: 0 -1px 2px black;    height: 20px;    left: 8px;    position: absolute;    top: 20px;    width: 18px;}.innerRightEyenv {    background: none repeat scroll 0 0 black;    border-radius: 50% / 90% 90% 10% 10%;    box-shadow: 0 -1px 2px black;    height: 20px;    left: 8px;    position: absolute;    top: 10px;    width: 18px;}.innerRightEye:after,.innerRightEyenv:after {    background: none repeat scroll 0 0 white;    border-top-left-radius: 50% 100%;    border-top-right-radius: 35% 80%;    bottom: -1px;    content: "";    height: 13px;    left: 4px;    position: absolute;    width: 10px;}.fix {    background: none repeat scroll 0 0 black;    border-radius: 50%;    height: 4px;    position: absolute;    top: 17px;    width: 4px;}.fix:after {    background: none repeat scroll 0 0 black;    border-radius: 50%;    content: "";    height: 4px;    left: 14px;    position: absolute;    top: 0;    width: 4px;}.mouthTopContainer {    height: 29px;    left: 39px;    overflow: hidden;    position: absolute;    top: 120px;    width: 158px;    z-index: 1;}.mouthTop {    background: none repeat scroll 0 0 #ffa600;    border: 1px solid #ffa600;    border-top-left-radius: 45% 34px;    border-top-right-radius: 45% 34px;    height: 34px;    left: 0;    position: absolute;    top: 0;    width: 158px;    z-index: 1;}.mouthBottomContainer {    height: 15px;    left: 39px;    overflow: hidden;    position: absolute;    top: 146px;    width: 158px;    z-index: 1;}.mouthBottom {    -moz-border-bottom-colors: none;    -moz-border-left-colors: none;    -moz-border-right-colors: none;    -moz-border-top-colors: none;    background: none repeat scroll 0 0 #ffa600;    border-bottom-left-radius: 45% 24px;    border-bottom-right-radius: 45% 24px;    border-color: -moz-use-text-color #ffa600 #ffa600;    border-image: none;    border-right: 1px solid #ffa600;    border-style: none solid solid;    border-width: medium 1px 1px;    height: 24px;    left: 0;    position: absolute;    top: -4px;    width: 158px;    z-index: 1;}.lips {    -moz-border-bottom-colors: none;    -moz-border-left-colors: none;    -moz-border-right-colors: none;    -moz-border-top-colors: none;    background: none repeat scroll 0 0 #ffa600;    border-bottom-left-radius: 50% 100%;    border-bottom-right-radius: 50% 100%;    border-color: -moz-use-text-color #ffa600 #ffa600;    border-image: none;    border-right: 1px solid #ffa600;    border-style: none solid solid;    border-width: medium 1px 1px;    height: 24px;    left: 60px;    position: absolute;    top: 146px;    width: 116px;}.lipShadow {    border-bottom: 20px solid transparent;    border-right: 8px solid black;    border-top: 20px solid transparent;    height: 0;    left: -12px;    position: absolute;    top: 4px;    transform: rotate(-60deg);    transform-origin: right top 0;    width: 0;    z-index: 2;}.lipShadow.right {    left: 114px;    transform: rotate(60deg) rotateY(180deg);}.body {    height: 300px;    left: 48px;    position: absolute;    top: 135px;    width: 326px;}.scarf {    -moz-border-bottom-colors: none;    -moz-border-left-colors: none;    -moz-border-right-colors: none;    -moz-border-top-colors: none;    background: none repeat scroll 0 0 #fb0009;    border-color: -moz-use-text-color #000 #000;    border-image: none;    border-radius: 30px 38px 50% 50% / 34px 34px 76px 76px;    border-right: 4px solid #000;    border-style: none solid solid;    border-width: medium 4px 4px;    height: 110px;    left: 34px;    position: absolute;    top: -2px;    width: 258px;    z-index: 5;}.scarfnv {    -moz-border-bottom-colors: none;    -moz-border-left-colors: none;    -moz-border-right-colors: none;    -moz-border-top-colors: none;    background: none repeat scroll 0 0 #FF59A1;    border-color: -moz-use-text-color #000 #000;    border-image: none;    border-radius: 30px 38px 50% 50% / 34px 34px 76px 76px;    border-right: 4px solid #000;    border-style: none solid solid;    border-width: medium 4px 4px;    height: 110px;    left: 34px;    position: absolute;    top: -2px;    width: 258px;    z-index: 5;}.scarfShadow {    border-top: 6px solid #000;    border-top-left-radius: 90px 120px;    border-top-right-radius: 30px;    height: 70px;    left: 6px;    position: absolute;    top: 0;    transform: rotate(-79deg);    width: 60px;}.scarfShadowRight {    border-bottom-right-radius: 70px;    border-right: 6px solid black;    height: 70px;    left: 143px;    position: absolute;    top: 8px;    width: 100px;    z-index: 6;}.scarfEnd {    background: none repeat scroll 0 0 #fb0009;    border: 3px solid black;    border-bottom-left-radius: 50% 43%;    border-bottom-right-radius: 15px;    border-top-left-radius: 20% 57%;    height: 64px;    left: 74px;    position: absolute;    top: 90px;    width: 52px;    z-index: 4;}.scarfnvEnd {    background: none repeat scroll 0 0 #FF59A1;    border: 3px solid black;    border-bottom-left-radius: 50% 43%;    border-bottom-right-radius: 15px;    border-top-left-radius: 20% 57%;    height: 64px;    left: 74px;    position: absolute;    top: 90px;    width: 52px;    z-index: 4;}.scarfEndShadow {    border-top: 6px solid black;    border-top-left-radius: 30px;    height: 20px;    left: 12px;    position: absolute;    top: 6px;    transform: skewX(4deg) scaleY(1.5) rotate(-60deg);    transform-origin: right top 0;    width: 20px;    z-index: 10;}.innerWrapper {    height: 200px;    left: 30px;    overflow: hidden;    position: absolute;    top: 76px;    width: 280px;}.inner {    background: none repeat scroll 0 0 #fff;    border: 1px solid #000;    border-radius: 50%;    height: 210px;    left: 25px;    position: absolute;    top: -71px;    width: 218px;    z-index: 4;}.outterWrapper {    height: 250px;    left: 32px;    overflow: hidden;    position: absolute;    top: 54px;    width: 262px;}.outter {    background: none repeat scroll 0 0 #000;    border: 1px solid #000;    border-radius: 125px;    height: 250px;    position: absolute;    top: -84px;    width: 260px;    z-index: 3;}.handWrapper {    left: 7px;    position: absolute;    top: 219px;}.leftHandTopContainer {    height: 26px;    left: 50px;    overflow: hidden;    position: absolute;    top: 55px;    transform: rotate(-70deg);    transform-origin: left bottom 0;    width: 118px;    z-index: 1;}.leftHandTop {    background: none repeat scroll 0 0 #000;    border: 1px solid #050346;    border-top-left-radius: 44% 38px;    border-top-right-radius: 56% 33px;    height: 54px;    position: absolute;    width: 128px;}.leftHandBottomContainer {    height: 30px;    left: 50px;    overflow: hidden;    position: absolute;    top: 78px;    transform: rotate(-70deg);    transform-origin: left top 0;    width: 100px;    z-index: 1;}.leftHandBottom {    -moz-border-bottom-colors: none;    -moz-border-left-colors: none;    -moz-border-right-colors: none;    -moz-border-top-colors: none;    background: none repeat scroll 0 0 #000;    border-bottom-left-radius: 48% 20px;    border-bottom-right-radius: 52% 23px;    border-color: -moz-use-text-color #050346 #050346;    border-image: none;    border-right: 1px solid #050346;    border-style: none solid solid;    border-width: medium 1px 1px;    height: 44px;    position: absolute;    top: -26px;    width: 128px;}.rightHandTopContainer {    height: 34px;    left: 240px;    overflow: hidden;    position: absolute;    top: 47px;    transform: rotate(65deg);    transform-origin: right bottom 0;    width: 118px;    z-index: 3;}.rightHandTop {    background: none repeat scroll 0 0 black;    border: 1px solid #050346;    border-top-left-radius: 59% 48px;    border-top-right-radius: 41% 54px;    height: 54px;    left: -30px;    position: absolute;    transform: rotateY(-180deg);    width: 148px;}.rightHandBottomContainer {    height: 58px;    left: 248px;    overflow: hidden;    position: absolute;    top: 81px;    transform: rotate(90deg);    transform-origin: right top 0;    width: 110px;    z-index: 1;}.rightHandBottom {    -moz-border-bottom-colors: none;    -moz-border-left-colors: none;    -moz-border-right-colors: none;    -moz-border-top-colors: none;    background: none repeat scroll 0 0 black;    border-bottom-right-radius: 100% 40px;    border-color: -moz-use-text-color #000 #000;    border-image: none;    border-right: 1px solid #000;    border-style: none solid solid;    border-width: medium 1px 1px;    height: 28px;    left: 38px;    position: absolute;    top: 1px;    width: 68px;    z-index: 999;}.footWrapper {    left: 80px;    position: absolute;    top: 292px;}.leftFootTopWrapper {    height: 37px;    left: -1px;    overflow: hidden;    position: absolute;    top: 16px;    width: 130px;    z-index: 2;}.leftFootTop {    background: none repeat scroll 0 0 #ff9c00;    border: 4px solid black;    border-top-left-radius: 80% 70%;    height: 60px;    left: 3px;    position: absolute;    top: -10px;    width: 120px;}.toe {    border-top: 4px solid black;    border-top-left-radius: 10px;    border-top-right-radius: 30px;    height: 20px;    left: 2px;    position: absolute;    top: 50px;    transform: rotate(-45deg);    transform-origin: left top 0;    width: 25px;    z-index: 10;}.toe.right {    left: 264px;    transform: rotate(45deg) rotateY(180deg);}.leftFootBottomWrapper {    height: 38px;    left: -1px;    overflow: hidden;    position: absolute;    top: 52px;    width: 130px;    z-index: 2;}.leftFootBottom {    background: none repeat scroll 0 0 #ff9c00;    border: 4px solid #000;    border-radius: 50% / 44% 44% 56% 56%;    height: 60px;    left: 3px;    position: absolute;    top: -30px;    width: 120px;}.rightFootTopWrapper {    height: 36px;    left: 134px;    overflow: hidden;    position: absolute;    top: 22px;    width: 134px;    z-index: 2;}.rightFootTop {    background: none repeat scroll 0 0 #ff9c00;    border: 4px solid black;    border-top-right-radius: 32% 65%;    height: 60px;    left: 4px;    position: absolute;    top: 0;    width: 120px;}.rightFootBottomWrapper {    height: 38px;    left: 134px;    overflow: hidden;    position: absolute;    top: 52px;    width: 134px;}.rightFootBottom {    background: none repeat scroll 0 0 #ff9c00;    border: 4px solid #000;    border-radius: 50% / 56% 56% 44% 44%;    height: 60px;    left: 3px;    position: absolute;    top: -30px;    width: 120px;}.rightToe {    background: none repeat scroll 0 0 #ff9c00;    border: 2px solid #000;    border-radius: 50%;    height: 10px;    left: 210px;    position: absolute;    top: 35px;    transform: rotate(34deg);    transform-origin: right bottom 0;    width: 40px;    z-index: 1;}

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <link href="index.css" rel="stylesheet" />    <title>CSS3 Tencent Tencent QQ </title></head><body>       <header> CSS3 Tencent QQ 测试-火狐31.0 </header>    <div class="con">        <a id="qq">            <div class=‘head‘>                <div class=‘left eye‘>                    <div class="innerLeftEye">                    </div>                </div>                <div class=‘right eye‘>                    <div class="innerRightEye">                        <div class="fix"></div>                    </div>                </div>                <div class=‘mouthTopContainer‘>                    <div class=‘mouthTop‘></div>                </div>                <div class="mouthBottomContainer">                    <div class="mouthBottom"></div>                </div>                <div class="lipsContainer">                    <div class="lips">                        <div class="lipShadow left">                        </div>                        <div class="lipShadow right">                        </div>                    </div>                </div>            </div>            <div class="body">                <div class="innerWrapper">                    <div class="inner">                    </div>                </div>                <div class="outterWrapper">                    <div class=‘outter‘>                    </div>                </div>                <div class="scarf">                    <div class="scarfShadow">                    </div>                    <div class="scarfShadowRight">                    </div>                </div>                <div class="scarfEnd">                    <div class="scarfEndShadow">                    </div>                </div>            </div>            <div class="handWrapper">                <div class="leftHandTopContainer">                    <div class="leftHandTop">                    </div>                </div>                <div class="leftHandBottomContainer">                    <div class="leftHandBottom">                    </div>                </div>                <div class="rightHandTopContainer">                    <div class="rightHandTop">                    </div>                </div>                <div class="rightHandBottomContainer">                    <div class="rightHandBottom">                    </div>                </div>            </div>            <div class=‘footWrapper‘>                <div class="leftFootTopWrapper">                    <div class="leftFootTop">                    </div>                </div>                <div class="leftFootBottomWrapper">                    <div class="leftFootBottom">                    </div>                </div>                <div class=‘toe left‘></div>                <div class="rightFootTopWrapper">                    <div class="rightFootTop">                    </div>                </div>                <div class="rightFootBottomWrapper">                    <div class="rightFootBottom">                    </div>                </div>                <div class=‘toe right‘></div>            </div>        </a>        <a id="qqnv">            <div class="headflower">                <div class="hdj1"></div>                <div class="hdj2"></div>                <div class="hdj"></div>                <div class="hdj3"></div>                <div class="hdj4"></div>            </div>            <div class=‘head‘>                               <div class=‘left eyenv‘>                    <div class="eye2">                        <div class="innerLeftEyenv">                        </div>                    </div>                </div>                <div class=‘right eyenv‘>                    <div class="eye2">                        <div class="innerRightEyenv">                            <div class="fix"></div>                        </div>                    </div>                                  </div>                <div class=‘mouthTopContainer‘>                    <div class=‘mouthTop‘></div>                </div>                <div class="mouthBottomContainer">                    <div class="mouthBottom"></div>                </div>                <div class="lipsContainer">                    <div class="lips">                        <div class="lipShadow left">                        </div>                        <div class="lipShadow right">                        </div>                    </div>                </div>            </div>            <div class="body">                <div class="innerWrapper">                    <div class="inner">                    </div>                </div>                <div class="outterWrapper">                    <div class=‘outter‘>                    </div>                </div>                <div class="scarfnv">                    <div class="scarfShadow">                    </div>                    <div class="scarfShadowRight">                    </div>                </div>                <div class="scarfnvEnd">                    <div class="scarfEndShadow">                    </div>                </div>            </div>            <div class="handWrapper">                <div class="leftHandTopContainer">                    <div class="leftHandTop">                    </div>                </div>                <div class="leftHandBottomContainer">                    <div class="leftHandBottom">                    </div>                </div>                <div class="rightHandTopContainer">                    <div class="rightHandTop">                    </div>                </div>                <div class="rightHandBottomContainer">                    <div class="rightHandBottom">                    </div>                </div>            </div>            <div class=‘footWrapper‘>                <div class="leftFootTopWrapper">                    <div class="leftFootTop">                    </div>                </div>                <div class="leftFootBottomWrapper">                    <div class="leftFootBottom">                    </div>                </div>                <div class=‘toe left‘></div>                <div class="rightFootTopWrapper">                    <div class="rightFootTop">                    </div>                </div>                <div class="rightFootBottomWrapper">                    <div class="rightFootBottom">                    </div>                </div>                <div class=‘toe right‘></div>            </div>        </a>    </div></body></html>