首页 > 其他分享 >css3效果真Nb,可惜的ie

css3效果真Nb,可惜的ie

时间：2023-04-28 22:35:08浏览次数：42  
标签：css3 moz ie Nb radius webkit border top left 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS3测试</title>
<meta name="description" 
content="测试CSS3在各个浏览器的效果"> 
<meta http-equiv="adimage" content="200">
<mce:style><!--
body{
	background:#fff;
    width:901px;
    margin:auto;
}
#doraemon{
	position:fixed;
	margin:50px;	
	float:left;
	width:500px;
}
#instr{
	float:right;
	width:400px;
	font-size:14px;
	border-left:2px solid black;
	padding-left:20px;
}
#head_light{
	width:50px;
	height:50px;
	transform: rotate(20deg);
		-webkit-transform: rotate(20deg);
		-moz-transform: rotate(20deg);
		-o-transform: rotate(20deg);
	box-shadow:80px 20px 50px #fff;
		-webkit-box-shadow:80px 20px 55px #fff;
		-moz-box-shadow:80px 20px 50px #fff;
	border-radius:45px;
		-webkit-border-radius:45px;
		-moz-border-radius:60px;
	position:absolute;
	top:-20px;
	left:170px;
	opacity:0.5
}

#face{
	position:relative;
	width:310px;
	height:300px;
	border-radius:146px;
		-webkit-border-radius:146px;
		-moz-border-radius:146px;
	background:#07beea;	
	background: -webkit-gradient(linear, right top, left bottom, from(#fff) ,color-stop(0.20, #07beea), color-stop(0.73, #10a6ce),color-stop(0.95, #000), to(#444));	
	background: -moz-linear-gradient(right top, #fff,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%); 
	border:#333 2px solid;
	top:-15px;
	box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
		-webkit-box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
		-moz-box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
	
}

#base{
	position:relative;
	top:-5px;
}

#base_white{
	position:absolute;
	border:#000 2px solid;
	width:264px;
	height:196px;
	border-radius: 150px 150px;
		-webkit-border-radius: 150px 150px;
		-moz-border-radius: 150px 150px;
	background:#FFF;
	background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));	
	background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000); 
	z-index:1;
	top:85px;
	left:22px;	
}


#eyes{
	position:relative;
	top:-5px;
}

div.eye{
	position:absolute;
	border-radius: 35px 35px;
		-webkit-border-radius: 35px 35px;
		-moz-border-radius: 35px 35px;
	border:2px solid #000;
	width:72px;
	height:83px;
	z-index:20;
	background:#fff;
}

div.black_eye{
	position:absolute;
	width:15px;
	height:15px;
	border-radius:10px;
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
	background:#333;
	z-index:21;
		-webkit-animation-name: cate;
		-webkit-animation-duration: 3s;
		-webkit-animation-timing-function: linear;
		-webkit-animation-iteration-count: 200;
}

@-webkit-keyframes cate{
	0%{
		margin:0 0 0 0;
	}
	80%	{
		margin:0px 0 0 0;
	}
	85%	{
		margin:-20px 0 0 0;
	}
	90%{
		margin:0 0 0 0;
	}
	93%{
		margin:0 0 0 7px;
	}
	96%{
		margin:0 0 0 0;
	}
	100%{
		margin:0 0 0 0;
	}
}

div.black_left{
	top:100px;
	left:130px;
}

div.black_right{
	top:100px;
	left:170px;
}

div.eye_left{
	top:45px;
	left:82px;	
}

div.eye_right{
	top:45px;
	left:156px;	
}

#nose{
	width:32px;
	height:32px;
	border:2px solid #000;
	border-radius:50px;
		-webkit-border-radius:50px;
		-moz-border-radius:50px;
	background:#c93e00;
	position:absolute;
	top:117px;
	left:139px;
	z-index:30;
}

#nose_light{
	width:10px;
	height:10px;
	border-radius:5px;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
	box-shadow:19px 8px 5px #fff;
		-webkit-box-shadow:19px 8px 5px #fff;
		-moz-box-shadow:19px 8px 5px #fff;
	position:relative;
	top:0px;
	left:0px;
}

#nose_line{
	background:#000;
	width:4px;
	height:100px;
	top:125px;
	left:156px;
	position:absolute;
}

#nose_line{
	background:#333;
	width:3px;
	height:100px;
	top:140px;
	left:155px;
	position:absolute;
		z-index:20;
}

#mouth{
	width:240px;
	height:500px;
	border-bottom:3px solid #333;
	border-radius:120px;
		-webkit-border-radius:120px;
		-moz-border-radius:120px;
	position:absolute;
	top:-263px;
	left:36px;
	z-index:10;
}

#mouth_rewrite{
	background:#fff;
	width:240px;
	height:90px;
	position:relative;
	top:115px;
	left:35px;
	z-index:12;
	border-radius:45px;
		-webkit-border-radius:45px;
		-moz-border-radius:60px;
}

#firefox_mouth, x:-moz-broken, x:last-of-type, x:indeterminate {
	position:relative;
	width:170px;
	height:150px;
	-moz-border-radius:85px;
	border:3px solid #000;
	background:#FFF;
	z-index:11;
	top:-3px;
	left:70px;
}

.whiskers{
	background:#333;
	height:2px;
	width:60px;
	position:absolute;
	z-index:20;
}
.whi_right{
	top:165px;
	left:210px;	
}	

.whi_right_top{
	top:145px;
	left:210px;
}	

.whi_right_bottom{
	top:185px;
	left:210px;
}	

.whi_left{
	top:165px;
	left:50px;	
}	
.whi_left_top{
	top:145px;
	left:50px;
}	

.whi_left_bottom{
	top:185px;
	left:50px;
}

.rotate20{
	transform: rotate(20deg);
		-webkit-transform: rotate(20deg);
		-moz-transform: rotate(20deg);
		-o-transform: rotate(20deg);	
}

.rotate160{
	transform: rotate(160deg);
		-webkit-transform: rotate(160deg);
		-moz-transform: rotate(160deg);
		-o-transform: rotate(160deg);	
}

#choker{
	position:relative;
	top:-55px;
	left:35px;
	z-index:100;
}

#belt{
	width:230px;
	height:20px;
	border:#000 solid 2px;
	background:#ca4100;
	background: -webkit-gradient(linear, left top, left bottom, from(#ca4100), to(#800400));	
	background: -moz-linear-gradient(top, #ca4100, #800400); 
	border-radius:10px;	
		-webkit-border-radius:10px;	
		-moz-border-radius:10px;
		position:relative;
	left:5px;
}

#bell{
	width:40px;
	height:40px;
	border-radius:50px;
		-webkit-border-radius:50px;
		-moz-border-radius:50px;
	border:2px solid #000;
	background:#f9f12a;
	background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100));	
	background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100); 
	box-shadow:-5px 5px 10px rgba(0,0,0,0.25);
		-webkit-box-shadow:-5px 3px 5px rgba(0,0,0,0.25);
		-moz-box-shadow:-5px 5px 10px rgba(0,0,0,0.25);
	position:relative;
	top:-15px;
	left:100px;
}

#bell_line{
	width:36px;
	height:2px;
	background:#f9f12a;
	border:#333 solid 2px;
	position:relative;
	top:10px;
}

#bell_circle{
	width:12px;
	height:10px;
	border-radius:5px;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
	background:#000;
	position:relative;
	top:14px;
	left:14px;
}

#bell_under{
	width:3px;
	height:15px;
	background:#000;
	position:relative;
	top:10px;
	left:18px;
}

#bell_light{
	width:10px;
	height:10px;
	border-radius:10px;
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
	box-shadow:19px 8px 5px #fff;
		-webkit-box-shadow:19px 8px 5px #fff;
		-moz-box-shadow:19px 8px 5px #fff;
	position:relative;
	opacity:0.7;
	top:-35px;
	left:5px;
}

#doutai{
	position:absolute;
	width:220px;
	height:165px;
	background:#07beea;
	background: -webkit-gradient(linear, right top, left top, from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be));	
	background: -moz-linear-gradient(right, #07beea, #0073b3 50%,#0096be 75%,#00b0e0 ,#0096be 100% ,#333 114%); 
	border:#333 2px solid;
	top:262px;
	left:46px;
}

div.base_white2{
	position:absolute;
	width:170px;
	height:170px;
	border-radius:85px;
		-webkit-border-radius:85px;
		-moz-border-radius:85px;
	border:2px solid #000;
	background:#FFF;
	background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));	
	background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000); 
}

.doutai_center{
	top:230px;
	left:72px;
}

#circle{
	position:relative;
	width:130px;
	height:130px;
	border-radius:65px;
		-webkit-border-radius:65px;
		-moz-border-radius:65px;
	background:#fff;
	background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));	
	background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88% , #fff); 
	border:2px solid #000;
	top:-120px;
	left:92px;
}
#circle_rewrite{
	position:relative;
	width:134px;
	height:60px;
	background:#fff;	
	border-bottom:2px solid #000;
	top:-250px;
	left:92px;
}

#hand_right{
	position:absolute;
	top:272px;
	left:248px;
	width:100px;
	height:100px;
}

#arm_right{
	position:relative;
	width:80px;
	height:50px;
	background:#07beea;
	background: -webkit-gradient(linear, left top, left bottom, from(#07beea),color-stop(0.85,#07beea), to(#555));	
	background: -moz-linear-gradient(top, #07beea, #07beea 85%, #555); 
	
	border:solid 1px #000;
	z-index:-1;
	top:17px;
	transform: rotate(35deg);
		-webkit-transform: rotate(35deg);
		-moz-transform: rotate(35deg);
		-o-transform: rotate(35deg);
	box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
		-webkit-box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
		-moz-box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
}

#hand_left{
	position:absolute;
	top:272px;
	left:-46px;
	width:100px;
	height:100px;
}

#arm_left{
	position:relative;
	width:80px;
	height:50px;
	background:#0096be;
	border:solid 1px #000;
	z-index:-1;
	top:17px;
	left:36px;
	transform: rotate(145deg);
		-webkit-transform: rotate(145deg);
		-moz-transform: rotate(145deg);
		-o-transform: rotate(145deg);
	box-shadow:5px -7px 10px rgba(0,0,0,0.25);
		-webkit-box-shadow:5px -7px 10px rgba(0,0,0,0.25);
		-moz-box-shadow:5px -7px 10px rgba(0,0,0,0.25);
}

div.hand_circle{
	position:absolute;
	width:60px;
	height:60px;
	border-radius:30px;
		-webkit-border-radius:30px;
		-moz-border-radius:30px;
	border:2px solid #000;
	background:#fff;
	background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999));	
	background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999); 
}

.hand_right{
	top:32px;
	left:40px;	
}

.arm_rewrite_right{
	position:relative;
	width:4px;
	height:45px;
	background:#07beea;
	top:-51px;
	left:18px;
}

.hand_left{
	top:34px;
	left:10px;	
}

.arm_rewrite_left{
	position:relative;
	width:4px;
	height:50px;
	background:#0096be;
	top:-52px;
	left:92px;
}


#foot{
	position:relative;
	width:280px;
	height:40px;
	top:-141px;
	left:20px;
}

#foot_left{
	width:125px;
	height:30px;
	background:#fff;
	background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));	
	background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 85%, #999); 
	border:solid 2px #333;
	border-top-left-radius:80px;
	border-bottom-left-radius:40px;
	border-top-right-radius:60px;
	border-bottom-right-radius:60px;
		-webkit-border-top-left-radius:80px;
		-webkit-border-bottom-left-radius:40px;
		-webkit-border-top-right-radius:60px;
		-webkit-border-bottom-right-radius:60px;
		-moz-border-radius-topleft:80px;
		-moz-border-radius-bottomleft:40px;
		-moz-border-radius-topright:60px;
		-moz-border-radius-bottomright:60px;
	position:relative;
	left:8px;
	top:2px;
	box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
		-webkit-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
		-moz-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
	z-index:-1;
}

#foot_right{
	position:relative;
	width:125px;
	height:30px;
	background:#fff;
	background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));	
	background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 85%, #999); 
	border:solid 2px #333;
	border-top-left-radius:60px;
	border-bottom-left-radius:60px;
	border-top-right-radius:80px;
	border-bottom-right-radius:40px;
		-webkit-border-top-left-radius:60px;
		-webkit-border-bottom-left-radius:60px;
		-webkit-border-top-right-radius:80px;
		-webkit-border-bottom-right-radius:40px;
		-moz-border-radius-topleft:60px;
		-moz-border-radius-bottomleft:60px;
		-moz-border-radius-topright:80px;
		-moz-border-radius-bottomright:40px;
	top:-32px;
	left:141px;
	box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
		-webkit-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
		-moz-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
	z-index:-1;
}

#foot_rewrite{
	position:relative;
	width:20px;
	height:10px;
	background:#fff;
	background: -webkit-gradient(linear, right top, left bottom, from(#666),color-stop(0.83,#fff), to(#fff));	
	background: -moz-linear-gradient(right top, #666, #fff 83%, #fff); 
	top:-76px;
	left:127px;
	border-top:2px solid #000;
	border-right:2px solid #000;
	border-left:2px solid #000;
	border-top-right-radius:40px;
	border-top-left-radius:40px;
		-webkit-border-top-right-radius:40px;
		-webkit-border-top-left-radius:40px;
		-moz-border-radius-topleft:40px;
		-moz-border-radius-topright:40px;
}

#shadow_doutai_left{
	width:30px;
	height:200px;
	box-shadow:-10px 10px 15px rgba(0,0,0,0.45);
		-webkit-box-shadow:-10px 10px 15px rgba(0,0,0,0.45);
		-moz-box-shadow:-10px 10px 15px rgba(0,0,0,0.45);
	position:absolute;
	top:250px;
	left:46px;
	z-index:-10;
}

#shadow_doutai_right{
	width:30px;
	height:200px;
	box-shadow:10px 10px 15px rgba(0,0,0,0.35);
		-webkit-box-shadow:10px 10px 25px rgba(0,0,0,0.35);
		-moz-box-shadow:10px 10px 15px rgba(0,0,0,0.35);
	position:absolute;
	top:240px;
	left:230px;
	z-index:-10;
}

#shadow_doutai_arm{
	width:85px;
	height:165px;
	box-shadow:-100px 10px 15px rgba(0,0,0,0.0);
		-webkit-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
		-moz-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
	position:absolute;
	top:230px;
	left:113px;
	z-index:10;
	opacity:0.5;
	transform: rotate(-20deg);
		-webkit-transform: rotate(-20deg);
		-moz-transform: rotate(-20deg);
		-o-transform: rotate(-20deg);
	border-bottom-left-radius:40px;
		-webkit-border-bottom-left-radius:40px;
		-moz-border-radius-bottomleft:40px;
	border-top-left-radius:20px;
		-webkit-border-top-left-radius:20px;
		-moz-border-radius-topleft:20px;
}

#shadow_belt{
	width:40px;
	height:30px;
	box-shadow:-100px 10px 15px rgba(0,0,0,0);
		-webkit-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
		-moz-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
	position:absolute;
	top:240px;
	left:130px;
	z-index:10;
	border-bottom-left-radius:40px;
		-webkit-border-bottom-left-radius:40px;
		-moz-border-radius-bottomleft:40px;
	z-index:300;
}

#arm_left:not(/*|*), .arm_rewrite_left:not(/*|*){
	background:#07beea;
}

#arm_left, .arm_rewrite_left{
	background:#07beea/9;
	*background:#07beea;
	_background:#07beea;
}

#kiji{
	position:relative;
	top:-150px;
}
--></mce:style><style mce_bogus="1">body{
	background:#fff;
    width:901px;
    margin:auto;
}
#doraemon{
	position:fixed;
	margin:50px;	
	float:left;
	width:500px;
}
#instr{
	float:right;
	width:400px;
	font-size:14px;
	border-left:2px solid black;
	padding-left:20px;
}
#head_light{
	width:50px;
	height:50px;
	transform: rotate(20deg);
		-webkit-transform: rotate(20deg);
		-moz-transform: rotate(20deg);
		-o-transform: rotate(20deg);
	box-shadow:80px 20px 50px #fff;
		-webkit-box-shadow:80px 20px 55px #fff;
		-moz-box-shadow:80px 20px 50px #fff;
	border-radius:45px;
		-webkit-border-radius:45px;
		-moz-border-radius:60px;
	position:absolute;
	top:-20px;
	left:170px;
	opacity:0.5
}

#face{
	position:relative;
	width:310px;
	height:300px;
	border-radius:146px;
		-webkit-border-radius:146px;
		-moz-border-radius:146px;
	background:#07beea;	
	background: -webkit-gradient(linear, right top, left bottom, from(#fff) ,color-stop(0.20, #07beea), color-stop(0.73, #10a6ce),color-stop(0.95, #000), to(#444));	
	background: -moz-linear-gradient(right top, #fff,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%); 
	border:#333 2px solid;
	top:-15px;
	box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
		-webkit-box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
		-moz-box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
	
}

#base{
	position:relative;
	top:-5px;
}

#base_white{
	position:absolute;
	border:#000 2px solid;
	width:264px;
	height:196px;
	border-radius: 150px 150px;
		-webkit-border-radius: 150px 150px;
		-moz-border-radius: 150px 150px;
	background:#FFF;
	background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));	
	background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000); 
	z-index:1;
	top:85px;
	left:22px;	
}


#eyes{
	position:relative;
	top:-5px;
}

div.eye{
	position:absolute;
	border-radius: 35px 35px;
		-webkit-border-radius: 35px 35px;
		-moz-border-radius: 35px 35px;
	border:2px solid #000;
	width:72px;
	height:83px;
	z-index:20;
	background:#fff;
}

div.black_eye{
	position:absolute;
	width:15px;
	height:15px;
	border-radius:10px;
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
	background:#333;
	z-index:21;
		-webkit-animation-name: cate;
		-webkit-animation-duration: 3s;
		-webkit-animation-timing-function: linear;
		-webkit-animation-iteration-count: 200;
}

@-webkit-keyframes cate{
	0%{
		margin:0 0 0 0;
	}
	80%	{
		margin:0px 0 0 0;
	}
	85%	{
		margin:-20px 0 0 0;
	}
	90%{
		margin:0 0 0 0;
	}
	93%{
		margin:0 0 0 7px;
	}
	96%{
		margin:0 0 0 0;
	}
	100%{
		margin:0 0 0 0;
	}
}

div.black_left{
	top:100px;
	left:130px;
}

div.black_right{
	top:100px;
	left:170px;
}

div.eye_left{
	top:45px;
	left:82px;	
}

div.eye_right{
	top:45px;
	left:156px;	
}

#nose{
	width:32px;
	height:32px;
	border:2px solid #000;
	border-radius:50px;
		-webkit-border-radius:50px;
		-moz-border-radius:50px;
	background:#c93e00;
	position:absolute;
	top:117px;
	left:139px;
	z-index:30;
}

#nose_light{
	width:10px;
	height:10px;
	border-radius:5px;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
	box-shadow:19px 8px 5px #fff;
		-webkit-box-shadow:19px 8px 5px #fff;
		-moz-box-shadow:19px 8px 5px #fff;
	position:relative;
	top:0px;
	left:0px;
}

#nose_line{
	background:#000;
	width:4px;
	height:100px;
	top:125px;
	left:156px;
	position:absolute;
}

#nose_line{
	background:#333;
	width:3px;
	height:100px;
	top:140px;
	left:155px;
	position:absolute;
		z-index:20;
}

#mouth{
	width:240px;
	height:500px;
	border-bottom:3px solid #333;
	border-radius:120px;
		-webkit-border-radius:120px;
		-moz-border-radius:120px;
	position:absolute;
	top:-263px;
	left:36px;
	z-index:10;
}

#mouth_rewrite{
	background:#fff;
	width:240px;
	height:90px;
	position:relative;
	top:115px;
	left:35px;
	z-index:12;
	border-radius:45px;
		-webkit-border-radius:45px;
		-moz-border-radius:60px;
}

#firefox_mouth, x:-moz-broken, x:last-of-type, x:indeterminate {
	position:relative;
	width:170px;
	height:150px;
	-moz-border-radius:85px;
	border:3px solid #000;
	background:#FFF;
	z-index:11;
	top:-3px;
	left:70px;
}

.whiskers{
	background:#333;
	height:2px;
	width:60px;
	position:absolute;
	z-index:20;
}
.whi_right{
	top:165px;
	left:210px;	
}	

.whi_right_top{
	top:145px;
	left:210px;
}	

.whi_right_bottom{
	top:185px;
	left:210px;
}	

.whi_left{
	top:165px;
	left:50px;	
}	
.whi_left_top{
	top:145px;
	left:50px;
}	

.whi_left_bottom{
	top:185px;
	left:50px;
}

.rotate20{
	transform: rotate(20deg);
		-webkit-transform: rotate(20deg);
		-moz-transform: rotate(20deg);
		-o-transform: rotate(20deg);	
}

.rotate160{
	transform: rotate(160deg);
		-webkit-transform: rotate(160deg);
		-moz-transform: rotate(160deg);
		-o-transform: rotate(160deg);	
}

#choker{
	position:relative;
	top:-55px;
	left:35px;
	z-index:100;
}

#belt{
	width:230px;
	height:20px;
	border:#000 solid 2px;
	background:#ca4100;
	background: -webkit-gradient(linear, left top, left bottom, from(#ca4100), to(#800400));	
	background: -moz-linear-gradient(top, #ca4100, #800400); 
	border-radius:10px;	
		-webkit-border-radius:10px;	
		-moz-border-radius:10px;
		position:relative;
	left:5px;
}

#bell{
	width:40px;
	height:40px;
	border-radius:50px;
		-webkit-border-radius:50px;
		-moz-border-radius:50px;
	border:2px solid #000;
	background:#f9f12a;
	background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100));	
	background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100); 
	box-shadow:-5px 5px 10px rgba(0,0,0,0.25);
		-webkit-box-shadow:-5px 3px 5px rgba(0,0,0,0.25);
		-moz-box-shadow:-5px 5px 10px rgba(0,0,0,0.25);
	position:relative;
	top:-15px;
	left:100px;
}

#bell_line{
	width:36px;
	height:2px;
	background:#f9f12a;
	border:#333 solid 2px;
	position:relative;
	top:10px;
}

#bell_circle{
	width:12px;
	height:10px;
	border-radius:5px;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
	background:#000;
	position:relative;
	top:14px;
	left:14px;
}

#bell_under{
	width:3px;
	height:15px;
	background:#000;
	position:relative;
	top:10px;
	left:18px;
}

#bell_light{
	width:10px;
	height:10px;
	border-radius:10px;
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
	box-shadow:19px 8px 5px #fff;
		-webkit-box-shadow:19px 8px 5px #fff;
		-moz-box-shadow:19px 8px 5px #fff;
	position:relative;
	opacity:0.7;
	top:-35px;
	left:5px;
}

#doutai{
	position:absolute;
	width:220px;
	height:165px;
	background:#07beea;
	background: -webkit-gradient(linear, right top, left top, from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be));	
	background: -moz-linear-gradient(right, #07beea, #0073b3 50%,#0096be 75%,#00b0e0 ,#0096be 100% ,#333 114%); 
	border:#333 2px solid;
	top:262px;
	left:46px;
}

div.base_white2{
	position:absolute;
	width:170px;
	height:170px;
	border-radius:85px;
		-webkit-border-radius:85px;
		-moz-border-radius:85px;
	border:2px solid #000;
	background:#FFF;
	background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));	
	background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000); 
}

.doutai_center{
	top:230px;
	left:72px;
}

#circle{
	position:relative;
	width:130px;
	height:130px;
	border-radius:65px;
		-webkit-border-radius:65px;
		-moz-border-radius:65px;
	background:#fff;
	background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));	
	background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88% , #fff); 
	border:2px solid #000;
	top:-120px;
	left:92px;
}
#circle_rewrite{
	position:relative;
	width:134px;
	height:60px;
	background:#fff;	
	border-bottom:2px solid #000;
	top:-250px;
	left:92px;
}

#hand_right{
	position:absolute;
	top:272px;
	left:248px;
	width:100px;
	height:100px;
}

#arm_right{
	position:relative;
	width:80px;
	height:50px;
	background:#07beea;
	background: -webkit-gradient(linear, left top, left bottom, from(#07beea),color-stop(0.85,#07beea), to(#555));	
	background: -moz-linear-gradient(top, #07beea, #07beea 85%, #555); 
	
	border:solid 1px #000;
	z-index:-1;
	top:17px;
	transform: rotate(35deg);
		-webkit-transform: rotate(35deg);
		-moz-transform: rotate(35deg);
		-o-transform: rotate(35deg);
	box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
		-webkit-box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
		-moz-box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
}

#hand_left{
	position:absolute;
	top:272px;
	left:-46px;
	width:100px;
	height:100px;
}

#arm_left{
	position:relative;
	width:80px;
	height:50px;
	background:#0096be;
	border:solid 1px #000;
	z-index:-1;
	top:17px;
	left:36px;
	transform: rotate(145deg);
		-webkit-transform: rotate(145deg);
		-moz-transform: rotate(145deg);
		-o-transform: rotate(145deg);
	box-shadow:5px -7px 10px rgba(0,0,0,0.25);
		-webkit-box-shadow:5px -7px 10px rgba(0,0,0,0.25);
		-moz-box-shadow:5px -7px 10px rgba(0,0,0,0.25);
}

div.hand_circle{
	position:absolute;
	width:60px;
	height:60px;
	border-radius:30px;
		-webkit-border-radius:30px;
		-moz-border-radius:30px;
	border:2px solid #000;
	background:#fff;
	background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999));	
	background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999); 
}

.hand_right{
	top:32px;
	left:40px;	
}

.arm_rewrite_right{
	position:relative;
	width:4px;
	height:45px;
	background:#07beea;
	top:-51px;
	left:18px;
}

.hand_left{
	top:34px;
	left:10px;	
}

.arm_rewrite_left{
	position:relative;
	width:4px;
	height:50px;
	background:#0096be;
	top:-52px;
	left:92px;
}


#foot{
	position:relative;
	width:280px;
	height:40px;
	top:-141px;
	left:20px;
}

#foot_left{
	width:125px;
	height:30px;
	background:#fff;
	background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));	
	background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 85%, #999); 
	border:solid 2px #333;
	border-top-left-radius:80px;
	border-bottom-left-radius:40px;
	border-top-right-radius:60px;
	border-bottom-right-radius:60px;
		-webkit-border-top-left-radius:80px;
		-webkit-border-bottom-left-radius:40px;
		-webkit-border-top-right-radius:60px;
		-webkit-border-bottom-right-radius:60px;
		-moz-border-radius-topleft:80px;
		-moz-border-radius-bottomleft:40px;
		-moz-border-radius-topright:60px;
		-moz-border-radius-bottomright:60px;
	position:relative;
	left:8px;
	top:2px;
	box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
		-webkit-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
		-moz-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
	z-index:-1;
}

#foot_right{
	position:relative;
	width:125px;
	height:30px;
	background:#fff;
	background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));	
	background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 85%, #999); 
	border:solid 2px #333;
	border-top-left-radius:60px;
	border-bottom-left-radius:60px;
	border-top-right-radius:80px;
	border-bottom-right-radius:40px;
		-webkit-border-top-left-radius:60px;
		-webkit-border-bottom-left-radius:60px;
		-webkit-border-top-right-radius:80px;
		-webkit-border-bottom-right-radius:40px;
		-moz-border-radius-topleft:60px;
		-moz-border-radius-bottomleft:60px;
		-moz-border-radius-topright:80px;
		-moz-border-radius-bottomright:40px;
	top:-32px;
	left:141px;
	box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
		-webkit-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
		-moz-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
	z-index:-1;
}

#foot_rewrite{
	position:relative;
	width:20px;
	height:10px;
	background:#fff;
	background: -webkit-gradient(linear, right top, left bottom, from(#666),color-stop(0.83,#fff), to(#fff));	
	background: -moz-linear-gradient(right top, #666, #fff 83%, #fff); 
	top:-76px;
	left:127px;
	border-top:2px solid #000;
	border-right:2px solid #000;
	border-left:2px solid #000;
	border-top-right-radius:40px;
	border-top-left-radius:40px;
		-webkit-border-top-right-radius:40px;
		-webkit-border-top-left-radius:40px;
		-moz-border-radius-topleft:40px;
		-moz-border-radius-topright:40px;
}

#shadow_doutai_left{
	width:30px;
	height:200px;
	box-shadow:-10px 10px 15px rgba(0,0,0,0.45);
		-webkit-box-shadow:-10px 10px 15px rgba(0,0,0,0.45);
		-moz-box-shadow:-10px 10px 15px rgba(0,0,0,0.45);
	position:absolute;
	top:250px;
	left:46px;
	z-index:-10;
}

#shadow_doutai_right{
	width:30px;
	height:200px;
	box-shadow:10px 10px 15px rgba(0,0,0,0.35);
		-webkit-box-shadow:10px 10px 25px rgba(0,0,0,0.35);
		-moz-box-shadow:10px 10px 15px rgba(0,0,0,0.35);
	position:absolute;
	top:240px;
	left:230px;
	z-index:-10;
}

#shadow_doutai_arm{
	width:85px;
	height:165px;
	box-shadow:-100px 10px 15px rgba(0,0,0,0.0);
		-webkit-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
		-moz-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
	position:absolute;
	top:230px;
	left:113px;
	z-index:10;
	opacity:0.5;
	transform: rotate(-20deg);
		-webkit-transform: rotate(-20deg);
		-moz-transform: rotate(-20deg);
		-o-transform: rotate(-20deg);
	border-bottom-left-radius:40px;
		-webkit-border-bottom-left-radius:40px;
		-moz-border-radius-bottomleft:40px;
	border-top-left-radius:20px;
		-webkit-border-top-left-radius:20px;
		-moz-border-radius-topleft:20px;
}

#shadow_belt{
	width:40px;
	height:30px;
	box-shadow:-100px 10px 15px rgba(0,0,0,0);
		-webkit-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
		-moz-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
	position:absolute;
	top:240px;
	left:130px;
	z-index:10;
	border-bottom-left-radius:40px;
		-webkit-border-bottom-left-radius:40px;
		-moz-border-radius-bottomleft:40px;
	z-index:300;
}

#arm_left:not(/*|*), .arm_rewrite_left:not(/*|*){
	background:#07beea;
}

#arm_left, .arm_rewrite_left{
	background:#07beea/9;
	*background:#07beea;
	_background:#07beea;
}

#kiji{
	position:relative;
	top:-150px;
}</style>
</head><body>
<div id="doraemon">
	<div id="face">
    	<div id="head_light"></div>
    	<div id="eyes">
    	<div class="eye eye_left"></div>
        	<div class="black_eye black_left"></div>
        
      	<div class="eye eye_right"></div>
        	<div class="black_eye black_right"></div>
        </div>
        <div id="base">
			<div id="base_white"></div>
				<div id="nose">
					<div id="nose_light"></div>
				</div>
                <div id="nose_line"></div>
                <div id="mouth"></div>
                <div id="mouth_rewrite"></div>
                <div id="firefox_mouth"></div>

				<div class="whiskers whi_right_top rotate160"></div>
				<div class="whiskers whi_right"></div>
				<div class="whiskers whi_right_bottom rotate20"></div>
                    
				<div class="whiskers whi_left_top rotate20"></div>
				<div class="whiskers whi_left"></div>
				<div class="whiskers whi_left_bottom rotate160"></div>
        </div>
	</div>
    <div id="choker">
    	<div id="belt"></div>
    	<div id="bell">
       	  <div id="bell_line"></div>
            <div id="bell_circle"></div>
            <div id="bell_under"></div>
		<div id="bell_light"></div>
		</div>
    </div>
	<div id="body">
    <div id="doutai"></div>
		<div class="base_white2 doutai_center"></div>
        		<div id="pocket">
                	<div id="circle"></div>
                    <div id="circle_rewrite"></div>
                </div>
	</div>
	<div id="hand_right">
    	<div id="arm_right"></div>
		<div class="hand_circle hand_right"></div>
		<div class="arm_rewrite_right"></div>
    </div>
	<div id="hand_left">
    	<div id="arm_left"></div>
		<div class="hand_circle hand_left"></div>
	  <div class="arm_rewrite_left"></div>
    </div>
	<div id="foot">
    	<div id="foot_left"></div>
        <div id="foot_right"></div>
        <div id="foot_rewrite"></div>
    </div>
    	<div id="shadow_doutai_arm"></div>
    	<div id="shadow_doutai_left"></div>
    	<div id="shadow_doutai_right"></div>
        <div id="shadow_belt"></div>
</div>
<div id="instr">
<p><strong>说明</strong>：本页面用于测试各个浏览器对CSS3的解释效果，左边的“图像”并非图片，而是纯CSS。目前各个浏览器对CSS3的支持效果不一样，其中IE系的浏览器支持效果最差。</p>
<p><strong>副作用</strong>：你可以对照左右的“图片”来判断你使用的是什么浏览器。</p>
<p>---</p>
<ul>
<li>效果最好的是Webkit系浏览器，包括Safari (4.05)和Chrome (5.0)等，看到的效果如下截图，而且眼睛还能动：</li>
<blockquote><p><img height="150" width="120" alt="safari" src="http://69.147.90.156/1300/4611405938_a67dc09694_o.png" mce_src="http://69.147.90.156/1300/4611405938_a67dc09694_o.png" /></p></blockquote>

<li>效果在其次的是Firefox (3.6)，效果和Safari的一样，但眼睛不能动。</li>
<blockquote><p><img height="150" width="120" alt="safari" src="http://69.147.90.156/1300/4611405938_a67dc09694_o.png" mce_src="http://69.147.90.156/1300/4611405938_a67dc09694_o.png" /></p></blockquote>
<li>在Opera (10.53) 里，图像没有了渐进层：</li>
<blockquote><p><img height="150" width="121" alt="Opera10.53" src="http://69.147.90.156/1335/4610807435_e028c49f2d_o.png" mce_src="http://69.147.90.156/1335/4610807435_e028c49f2d_o.png" /></p></blockquote>
<li>在iPhone OS 3.1的Safari里：</li>
<blockquote><p><img height="150" width="129" alt="Mobile Safari" src="http://76.13.18.77/3412/4611405842_fc26bf69ae_o.png" mce_src="http://76.13.18.77/3412/4611405842_fc26bf69ae_o.png" /></p></blockquote>
<li>在IE9测试版里：</li>
<blockquote><p><img height="150" width="123" alt="IE9" src="http://76.13.18.79/4069/4610795853_653957e6c2_o.png" mce_src="http://76.13.18.79/4069/4610795853_653957e6c2_o.png" /></p></blockquote>
<li>在IE8里：</li>
<blockquote><p><img height="150" width="124" alt="IE8" src="http://69.147.90.156/1022/4610807369_969f253753_o.png" mce_src="http://69.147.90.156/1022/4610807369_969f253753_o.png" /></p></blockquote>
<li>在IE7里：</li>

<blockquote><p><img height="150" width="127" alt="IE7" src="http://69.147.90.156/1398/4610800045_7b8d846ec1_o.png" mce_src="http://69.147.90.156/1398/4610800045_7b8d846ec1_o.png" /></p></blockquote>
<li>在IE6里：</li>
<blockquote><p><img height="150" width="113" alt="IE6" src="http://76.13.18.77/3386/4611405722_1876c4292c_o.png" mce_src="http://76.13.18.77/3386/4611405722_1876c4292c_o.png" /></p></blockquote>
</ul>

标签：css3,moz,ie,Nb,radius,webkit,border,top,left
From： https://blog.51cto.com/u_252283/6235717

相关文章

  • 不跳动(除了ie6) 总在最右下角
    <mce:scripttype="text/javascript"><!--window.onresize=window.onscroll=window.onload=function(){varwin_w=document.documentElement.clientWidth;//窗口宽varspace_w=0;//左空白宽if(win_w>1000){//窗口大于ma......
  • ie6 ie 8 ff 总在页脚右下角的绝对定位top div
    top.jsfunctionsetH(){varmain_div_w=1010;vardiv_w=$e('top_t').offsetWidth;vardiv_h=$e('top_t').offsetHeight;//下面二行必须定义docw3c标准varwin_w=document.documentElement.clientWidth;varwi......
  • 插入随机/跟随鼠标/点击一次即消失/漂浮图片(ie测试通过)
    //跟随方法比document.click不足之处:当出现cpu占用过高时,会出现跟随不上现象,导致此次点击并不能弹出窗口varimgs=newArray("http://www.google.cn/intl/zh-CN/images/logo_cn.gif","http://hp.tom.com/images/logo.gif","htt......
  • 支持ff/ie的form内容必填出错提示
    当前控件填写有误,则后面显示表示错误图片,并首个对象获得焦点,ff/ie通过 可以修改一下js达到不必每个控件后面先放一图片,可以动态生成,再消掉<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htm......
  • 20042124_chappie
    [换成自己的源]docker-machinesshdefaultsed-i"s|EXTRA_ARGS='|EXTRA_ARGS='--registry-mirror=https://2w188x2k.mirror.aliyuncs.com|g"/var/lib/boot2docker/profileexitdocker-machinerestartdefault [打开rknndocker]dockerrun-t-i--privilege......
  • GridView中CheckBox的数据绑定显示选中和未选中问题
    https://www.cnblogs.com/zxd543/p/3121169.html效果如下（以会员价为例）会员价（MemberPrice）字段的数据库类型为int（1表示true，0表示false）页面绑定如下：<asp:TemplateFieldHeaderText="会员价"><ItemStyleHorizontalAlign="Center"Width="60px"/>......
  • 解决 ERROR:Docker Got permission denied while trying to connect to the Docker da
    解决ERROR:DockerGotpermissiondeniedwhiletryingtoconnecttotheDockerdaemonsocketatunix在终端执行"dockerversion"命令，出现如下报错：”GotpermissiondeniedwhiletryingtoconnecttotheDockerdaemonsocketatunix:///var/run/docker.sock:Gethttp......
  • Vue插件图片预览hevue-img-preview
    安装#安装npminstallhevue-img-preview--save#main.js引入importhevueImgPreviewfrom'hevue-img-preview'Vue.use(hevueImgPreview)#使用#//给任意对象添加任意事件，例如<img:src="imgurl"@click="previewImg(imgurl)">#//在事件里调用方法进行预......
  • 兼容IE解决[date] Invalid Date问题
    ProblemIncaseyourdateisstoredinSQLdatetimelike2020-04-0705:30:00andwanttoparseitinIE.WhenyouparseitwithJavaScriptinIEusingnewDate(),itoutputsInvalidDatewhilelatestversionsofChromeandFirefoxparsethisdatecorrectl......
  • 为HttpClient开启HTTP/2
    .NetCore在调用其他服务时，调用通常使用HttpClient，而HttpClient默认使用HTTP/1.1。  配置HttpClient以使用HTTP/2h2连接自.NETCore3.0发布以来，.NET开发人员可以使用HttpClient启用HTTP/2。 设置HTTP/2的方法DefaultRequestVersion和DefaultVersionP......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99