|
CSS3绘图实例代码，请在火狐运行，css3的圆角形状，在经过transform处理之后，overflow属性hidden值的表现会出现不兼容，moz核心下正常，在webkit核心的浏览器下，hidden的区域始终是方块形状，无视圆角。 代码如下 |
图片：QQ截图20141215154613.jpg
<!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=gb2312\" />
<title>CSS3绘图实例代码</title>
<style type=\"text/css\">
*{
margin:0;
padding:0;
}
body {
background: #fff;
}
.color1{
background: #ffb400;
}
.color2{
background: #e78500;
}
.color3{
background: #bd5d00;
}
.color4{
background: #9e3300;
}
.color5{
background: #772400;
}
div{
overflow: hidden;
}
.wrapper{
width:450px;
height:450px;
left:50%;
top:50%;
margin:-225px 0 0 -225px;
position: absolute;
}
.top{
width:48px;
height:62px;
top:9px;
left:232px;
position: absolute;
}
.top .right{
width:48px;
height:62px;
border-radius: 35px 40px 0px 0px/15px 70px 10px 0px;
z-index: 1;
position: absolute;
}
.top .left{
width:160px;
height:320px;
top:7px;
left:-93px;
z-index: 2;
border-radius: 160px/320px;
position: absolute;
}
.top .mask1{
width:40px;
height:100px;
border-radius: 40px/100px;
background: #fff;
z-index: 3;
top:0px;
left:-32px;
position: absolute;
}
.top .mask2{
width:200px;
height:200px;
border-radius: 200px;
background: #fff;
z-index: 4;
top:55px;
left:-92px;
position: absolute;
}
.center{
width:340px;
height:192px;
margin:79px 0 0 57px;
}
.center .box1{
width:360px;
height:360px;
border-radius:180px;
margin:0 0 0 -20px;
}
.center .box1 .box1_1{
width:300px;
height:400px;
border-radius: 200px/300px;
margin:-40px 0 0 -20px;
}
.center .box2{
width:900px;
height:900px;
background: #fff;
margin:-265px 0 0 -383px;
border-radius: 900px;
}
.bottom{
width:550px;
height:330px;
border-radius: 550px/330px;
margin:-75px 0 0 -122px;
transform: rotate(6deg);
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-o-transform: rotate(6deg); /*Opera*/
}
.bottom .box1{
width:320px;
height:600px;
border-radius: 320px/600px;
margin:-380px 0 0 180px;
transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg); /*Opera*/
}
.bottom .box2{
width:320px;
height:600px;
border-radius: 320px/600px;
margin:35px 0 0 -35px;
transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg); /*Opera*/
}
.bottom .box3{
width:320px;
height:600px;
border-radius: 320px/600px;
margin:30px 0 0 -30px;
}
</style>
</head>
<body>
<div class=\"wrapper\">
<div class=\"top\">
<div class=\"right color3\"></div>
<div class=\"left color1\"></div>
<div class=\"mask1\"></div>
<div class=\"mask2\"></div>
</div>
<div class=\"center\">
<div class=\"box1 color2\">
<div class=\"box1_1 color1\"></div>
</div>
<div class=\"box2\"></div>
</div>
<div class=\"bottom\">
<div class=\"box1 color5\">
<div class=\"box2 color4\">
<div class=\"box3 color3\"></div>
</div>
</div>
</div>
</div>
</body>
</html>
