CSS3绘图实例代码

2020-01-27 14:18:17

字体：大中小

来源：转载

供稿：网友

CSS3绘图实例代码，请在火狐运行，css3的圆角形状，在经过transform处理之后，overflow属性hidden值的表现会出现不兼容，moz核心下正常，在webkit核心的浏览器下，hidden的区域始终是方块形状，无视圆角。

<!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>

上一篇：纯CSS气泡对话框

下一篇：CSS3 3D旋转动画代码实例