<div class="demo-container demo"><style type="text/css">
.demo{
width: 300px
}
.chrome {
position:relative
width:300px
height:300px
overflow:hidden
border-radius:300px
}
.chrome div {
position:absolute
text-indent:-9999px
}
.chrome_heart_white {
z-index:100
top:95px
left:95px
width:110px
height:110px
background:#fff
border-radius:110px
overflow:hidden
}
.chrome_heart {
top:10px
left:10px
width:90px
height:90px
background:#f00
border-radius:90px
background:-webkit-gradient(linear, left top, left bottom, from(#80B1DA), to(#165E98))
}
.chrome_wrap {
z-index:100
top:-100px
left:-100px
width:300px
height:300px
border-radius:300px
border:100px solid #fff
}
.chrome_part_color {
width:200px
height:210px
opacity:0.94
}
.chrome_part_red {
z-index:3
top:-44px
left:55px
-webkit-transform:rotate(60deg)
border-bottom-right-radius:30px
background:-webkit-gradient(radial, 20% 30%, 20, 40% 30%, 100, from(#ED5F51), to(#DF2228))
}
.chrome_part_red2 {
z-index:9
width:160px
height:80px
top:50px
left:18px
-webkit-transform:rotate(60deg)
background:-webkit-gradient(radial, 30% 0, 30, 40% 30%, 60, from(#E54745), to(#E12F35))
}
.chrome_part_yellow {
z-index:5
top:95px
right:-30px
border-top-left-radius:30px
background:-webkit-gradient(radial, 30% 40%, 130, 40% 20%, 60, from(#DBA328), to(#FDD207))
}
.chrome_part_green {
z-index:7
top:82px
left:-25px
-webkit-transform:rotate(117deg)
border-top-left-radius:30px
background:-webkit-gradient(radial, 30% 40%, 120, 30% 40%, 60, from(#419643), to(#4DB749))
}
.chrome_mask_color {
width:110px
height:110px
background:#fff
}
.chrome_mask_red {
z-index:8
height:40px
top:60px
left:25px
-webkit-transform:rotate(50deg)
background:#E12F35
}
.chrome_mask_yellow {
z-index:4
top:105px
right:-10px
-webkit-transform:rotate(-12deg)
}
.chrome_mask_green {
z-index:6
top:185px
left:38px
-webkit-transform:rotate(15deg)
}
</style>
<div class="chrome">
<div class="chrome_part_color chrome_part_red">红色块</div>
<div class="chrome_part_color chrome_part_yellow">黄色块</div>
<div class="chrome_part_color chrome_part_green">绿色块</div>
<div class="chrome_mask_color chrome_mask_red">红色遮罩</div>
<div class="chrome_mask_color chrome_mask_yellow">黄色遮罩</div>
<div class="chrome_mask_color chrome_mask_green">绿色遮罩</div>
<div class="chrome_part_color chrome_part_red2">红色补丁</div>
<div class="chrome_wrap">外围圆边</div>
<div class="chrome_heart_white">
<div class="chrome_heart">中心</div>
</div>
</div></div>
源码如下:<html>
<head>
<title>Google</title>
<style>
<!--
p{
font-size:60px
letter-spacing:-2px
font-family:timesnewroman
}
.g1, .g2{ color:#184dc6}
.o1, .e{ color:#c61800}
.o2{ color:#efba00}
.l{ color:#42c34a}
-->
</style>
</head>
<body>
<p><span class="g1">G</span><span class="o1">o</span><span class="o2">o</span><span class="g2">g</span><span class="l">l</span><span class="e">e</span></p>
</body>
</html>
