<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 迪士尼米老鼠卡通肖像</title>
<style>
.container {
max-width: 800px;
margin: 15px auto;
padding: 0 20px;
height: 500px;
box-sizing: border-box;
}
.container h1 {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 100;
letter-spacing: 0.5px;
color: #666;
font-size: 20px;
text-align: center;
}
.mickey {
position: relative;
margin: 0 auto;
top: 60px;
left: 50%;
margin-left: -100px;
}
.mickey .ear {
position: absolute;
top: -70px;
height: 120px;
width: 110px;
background: black;
border-radius: 100%;
}
.mickey .ear.left {
left: -55px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.mickey .ear.left .highlight {
top: 10px;
left: 13px;
-webkit-box-shadow: -10px 0px 10px -5px rgba(255, 255, 255, 0.4);
-moz-box-shadow: -10px 0px 10px -5px rgba(255, 255, 255, 0.4);
box-shadow: -10px 0px 10px -5px rgba(255, 255, 255, 0.4);
}
.mickey .ear.right {
right: -55px;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.mickey .ear.right .highlight {
right: 10px;
top: 13px;
-webkit-box-shadow: 0px -10px 10px -5px rgba(255, 255, 255, 0.4);
-moz-box-shadow: 0px -10px 10px -5px rgba(255, 255, 255, 0.4);
box-shadow: 0px -10px 10px -5px rgba(255, 255, 255, 0.4);
}
.mickey .ear .highlight {
position: absolute;
height: 85%;
width: 80%;
border-radius: 50%;
overflow: hidden;
}
.mickey .head {
position: relative;
background: black;
height: 200px;
width: 190px;
border-radius: 100%;
-webkit-box-shadow: inset 2px 5px 20px -2px rgba(255, 255, 255, 0.5);
-moz-box-shadow: inset 2px 5px 20px -2px rgba(255, 255, 255, 0.5);
box-shadow: inset 2px 5px 20px -2px rgba(255, 255, 255, 0.5);
}
.mickey .head .mouth-border {
position: absolute;
width: 200px;
left: 50%;
margin-left: -100px;
bottom: -10px;
height: 150px;
background: black;
border-radius: 50%;
z-index: 20;
}
.mickey .head .mouth-border .eye-patch {
position: absolute;
top: -40px;
background: #f2e1cf;
height: 140px;
width: 90px;
border-radius: 50%;
z-index: 20;
}
.mickey .head .mouth-border .eye-patch.left {
left: 20px;
-ms-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
-webkit-box-shadow: inset 5px 10px 15px -5px rgba(255, 255, 255, 0.5);
-moz-box-shadow: inset 5px 10px 15px -5px rgba(255, 255, 255, 0.5);
box-shadow: inset 5px 10px 15px -5px rgba(255, 255, 255, 0.5);
}
.mickey .head .mouth-border .eye-patch.right {
right: 20px;
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
-webkit-box-shadow: inset 0px 10px 15px -5px rgba(255, 255, 255, 0.5);
-moz-box-shadow: inset 0px 10px 15px -5px rgba(255, 255, 255, 0.5);
box-shadow: inset 0px 10px 15px -5px rgba(255, 255, 255, 0.5);
}
.mickey .head .mouth-border .eye {
position: absolute;
top: -10px;
background: white;
border: 2px solid #444;
border-top-width: 4px;
height: 70px;
width: 22px;
border-radius: 50%;
z-index: 26;
}
.mickey .head .mouth-border .eye.left {
right: 70px;
-ms-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
}
.mickey .head .mouth-border .eye.left .eyeball {
left: 1px;
}
.mickey .head .mouth-border .eye.right {
left: 70px;
-ms-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
.mickey .head .mouth-border .eye.right .eyeball {
right: 1px;
}
.mickey .head .mouth-border .eye .eyeball {
position: absolute;
bottom: 6px;
height: 25px;
width: 14px;
border-radius: 50%;
background: black;
background: -moz-linear-gradient(top, black 0%, #444 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, black) color-stop(100%, #444));
background: -webkit-linear-gradient(top, black 0%, #444 100%);
background: -o-linear-gradient(top, black 0%, #444 100%);
background: -ms-linear-gradient(top, black 0%, #444 100%);
background: linear-gradient(to bottom, black 0%, #444 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='$mickey-skin', endColorstr='$mickey-skin-shadow', GradientType=0);
}
.mickey .head .mouth-border .eye .eyeball .highlight {
position: relative;
top: 7px;
left: 4px;
height: 2px;
width: 0;
border-radius: 50%;
-webkit-box-shadow: 0px 0px 2px 2px rgba(255, 255, 255, 0.75);
-moz-box-shadow: 0px 0px 2px 2px rgba(255, 255, 255, 0.75);
box-shadow: 0px 0px 2px 2px rgba(255, 255, 255, 0.75);
}
.mickey .head .mouth-border .nose-ridge {
position: absolute;
width: 70px;
left: 50%;
margin-left: -37px;
top: 53px;
height: 30px;
border: 2px solid black;
background: #f2e1cf;
border-radius: 50%;
z-index: 27;
-webkit-box-shadow: inset 0 2px 5px 1px rgba(255, 255, 255, 0.5), 0px -4px 5px -2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 2px 5px 1px rgba(255, 255, 255, 0.5), 0px -4px 5px -2px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 2px 5px 1px rgba(255, 255, 255, 0.5), 0px -4px 5px -2px rgba(0, 0, 0, 0.3);
}
.mickey .head .mouth-border .mouth-patch {
position: absolute;
bottom: 10px;
height: 75px;
width: 135px;
border-radius: 50%;
z-index: 28;
background: #f2e1cf;
background: -moz-linear-gradient(top, #f2e1cf 0%, #f2e1cf 60%, #c1b4a5 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #f2e1cf), color-stop(60%, #f2e1cf), color-stop(100%, #c1b4a5));
background: -webkit-linear-gradient(top, #f2e1cf 0%, #f2e1cf 80%, #c1b4a5 100%);
background: -o-linear-gradient(top, #f2e1cf 0%, #f2e1cf 80%, #c1b4a5 100%);
background: -ms-linear-gradient(top, #f2e1cf 0%, #f2e1cf 80%, #c1b4a5 100%);
background: linear-gradient(to bottom, #f2e1cf 0%, #f2e1cf 60%, #c1b4a5 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='$mickey-skin', endColorstr='$mickey-skin-shadow', GradientType=0);
}
.mickey .head .mouth-border .mouth-patch.left {
left: 2px;
-ms-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
.mickey .head .mouth-border .mouth-patch.right {
right: 2px;
-ms-transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
}
.mickey .head .mouth-border .chin-white {
position: absolute;
bottom: -10px;
width: 80px;
left: 50%;
margin-left: -40px;
height: 80px;
border-radius: 50%;
background: #c1b4a5;
}
.mickey .head .nose {
position: absolute;
top: 120px;
width: 65px;
left: 50%;
margin-left: -32.5px;
height: 35px;
border-radius: 50%;
background: black;
z-index: 32;
overflow: hidden;
-webkit-box-shadow: 8px 8px 5px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 8px 8px 5px 1px rgba(0, 0, 0, 0.2);
box-shadow: 8px 8px 5px 1px rgba(0, 0, 0, 0.2);
}
.mickey .head .nose:before {
content: "";
position: absolute;
top: 15px;
left: 15px;
height: 0px;
width: 10px;
-webkit-box-shadow: 0px 0px 20px 6px rgba(255, 255, 255, 0.75);
-moz-box-shadow: 0px 0px 20px 6px rgba(255, 255, 255, 0.