CSS3圆角技术实现仿QQ2012面板效果图

CoderChang

2014-07-09

<!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>
<title>CSS3圆角技术实现仿QQ2012面板效果图</title>
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}

table {
border-collapse:collapse;
border-spacing:0;
}

fieldset, img {
border:0;
}
address, caption, cite, code, dfn, em, th, var {
font-style:normal;
font-weight:normal;
}
li {
list-style:none;
}
caption, th {
text-align:left;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}

q:before, q:after {
content:'';
}
abbr, acronym {
border:0;
font-variant:normal;
}

sup {
vertical-align:text-top;
}
sub {
vertical-align:text-bottom;
}
input, textarea, select {
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}


input, textarea, select {
*font-size:100%;
}


legend {
color:#000;
}

ul,li{list-style:none;}

a{text-decoration:none;}

body{
	font-size:12px;}
	
.cl{
	clear:both;}
	
input{
	border:0;
	outline:none;
	}
	
hr{
	border:0;
	}
.main{
	width:299px;
	height:664px;
	border:1px solid #616161;
	border-radius:3px;
	margin:50px;
	position:relative;
}

.top{
	height:50px;
	background:#1CA4BA;
	border:1px solid #89CED9;
	border-radius:3px 3px 0 0;
	}
.top h1{
	font-size:12px;
	font-weight:bold;
	margin:2px 0 0 8px;
	font-family:"微软雅黑";
	text-shadow:0px 0 13px #fff;
	}
.toux{
	width:60px;
	height:60px;
	border-radius:5px;
	z-index:10000px;
	position:absolute;
	top:25px;
	left:8px;
	box-shadow:0 0 7px #ECECEC;
	border:1px solid #AFB9C3;
	}
.toux:hover{
	box-shadow:0 0 12px #06ACF1;
	}
.toux span{
	width:58px;
	height:58px;
	display:block;
	border-radius:5px;
	border:1px solid #fff;
	background:#44B6D0;
	}
.radiusnow{
	border-radius:5px 0 0 0;
	padding:10px;
	border-top:1px solid #1596AB;
	background:#fff;
	}
.radiustwo{
	border-radius:0 30px 0 0;
	padding:10px;
	position:absolute;
	left:60px;
	top:35px;
	background:#fff;
	border-top:2px solid #1596AB;
	}
.radiusthree{
	border-radius:17px;
	background:#fff;
	padding:20px;
	position:absolute;
	left:78px;
	top:40px;
	z-index:1000;
	border-top:2px solid #1596AB;
	}
.radiusfour{
	border-radius:40px;
	background:#fff;
	padding:40px;
	position:absolute;
	left:115px;
	top:30px;
	z-index:2000;
	border-top:2px solid #1596AB;
	}
.radiusfive{
	border-radius:25px;
	background:#fff;
	padding:20px;
	position:absolute;
	left:190px;
	top:35px;
	z-index:2000;
	border-top:2px solid #1596AB;
	}
.radiussix{
	border-radius:30px;
	background:#fff;
	padding:30px;
	position:absolute;
	left:229px;
	top:28px;
	z-index:2000;
	border-top:2px solid #1596AB;
	}
.radiusseven{
	border-radius:18px;
	background:#fff;
	padding:10px;
	position:absolute;
	left:279px;
	top:37px;
	z-index:2000;
	border-top:2px solid #1596AB;
	}
.right{
	left:85px;
	top:25px;
	z-index:3000;
	position:absolute;
	}
.state{
	width:8px;
	height:8px;
	border-radius:8px;
	border:2px solid red;
	background:#fff;
	}
.state em{
	width:2px;
	height:8px;
	display:block;
	background:red;
	margin-left:3px;
	-webkit-transform:rotate(-40deg);
	}
.san{
	border-style:solid;
	display:block;
	left:16px;
	top:3px;
	border-color:#375357 #1CA4BA;
	border-width:4px 4px 0 4px;
	}	
.name{
	left:26px;
	top:0;
	width:70px;
	margin-left:10px;
	font-size:13px;
	text-shadow:0 0 10px #fff;
	}
.search{
	margin:30px 0 0 10px;
	z-index:4000;
	border-radius:4px;
	border:1px solid #D0D0D0;
	height:26px;
	color:#808080;
	line-height:26px;
	width:283px;
	text-indent:8px;
	background:-webkit-radial-gradient(top, #E3E3E3 20px,#fff 20%);
	}
.search div .a{
	width:10px;
	height:10px;
	display:block;
	top:3px;
	right:20px;
	border-radius:8px;
	border:2px solid #67979F;
	}
.search div .b{
	width:3px;
	height:10px;
	display:block;
	top:13px;
	right:20px;
	-webkit-transform:rotate(-35deg);
	background:#67979F;
	}
.san_two{
	border-style:solid;
	display:block;
	right:6px;
	top:10px;
	border-color:#375357 #fff;
	border-width:4px 4px 0 4px;
	}	
.nav{
	margin-top:70px;
	}
.nav ul{
	height:33px;
	border-radius:3px;
	background:#fff;
	}
.nav ul .currte{
	width:98px;
	height:33px;
	border-top-left-radius:6px;
	border-bottom:1px solid #EFF6F8;
	background:-webkit-linear-gradient(#D4ECEF,#EAF5F7,#fff);
	}
.nav ul .border{
	height:32px;
	width:199px;
	border:1px solid #ccc;
	}
.nav dl{
	padding-left:10px;
	}
.nav dl dd p{
	padding-left:20px;
	top:0;
	font-family:'微软雅黑';
	}
.nav dl dd em{
	border-style:solid;
	display:block;
	top:4px;
	border-color:#fff #787878;
	border-width:4px 0px 4px 4px;
	}
.nav dl .now{
	margin-top:10px;
	}
.nav dl .two{
	margin-top:35px;
	}
.nav dl .three{
	margin-top:60px;
	width:200px;
	}
.about{
	margin:50px;
	line-height:30px;
	}
.f_left{
	float:left;
	}
.f_right{
	float:right;
	}
.absolute{
	position:absolute;
	}
.relative{
	position:relative;
	}
</style>
</head>
<body>
<div class="main f_left">
	<div class="top">
	<h1>QQ2012</h1>
	</div>
	<span class="radiusnow"></span>
	<span class="radiustwo"></span>
	<span class="radiusthree"></span>
	<span class="radiusfour"></span>
	<span class="radiusfive"></span>
	<span class="radiussix"></span>
	<span class="radiusseven"></span>
	<p class="toux"><span></span></p>
	<div class="right">
		<div class="state">
		<em></em>
		</div>
		<em class="san absolute"></em>
		<strong class="name absolute">发粪涂墙</strong>
		<p style="margin-top:15px;">离开以后 第8天。。。</p>
	</div>
	<div class="search absolute">
		<p class="f_left">搜索联系人，网页信息和问问答案</p>
		<div class="f_right">
			<em class="a absolute"></em>
			<em class="b absolute"></em>
			<em class="san_two absolute"></em>
		</div>
	</div>
	<div class="nav">
			<ul>
				<li class="currte f_left"></li>
				<li class="border f_left"></li>
			</ul>
			<dl>
				<dd class="absolute now"><em class="absolute"></em> <p class="absolute">[201/689]</p></dd>
				<dd class="absolute two"><em class="absolute"></em> <p class="absolute">[1/1]</p></dd>
				<dd class="absolute three"><em class="absolute"></em> <p class="absolute">Myboss [1/3]</p></dd>
			</dl>
	</div>
</div>
<div class="about f_left">
	运用 css3属性的 :
	<p>渐变[radial-gradient();]</p>
	<p>圆角[border-radius:;]</p>
	<p>斜角[transform:rotate();]</p>
	<p>字体阴影[text-shadow:;]</p>
	<p>阴影[box-shadow:;]</p>
	</div>
</body>
</html>

css