CSS3圆角仿QQ2012主窗口

2020-01-27 14:16:43

字体：大中小

来源：转载

供稿：网友

运用CSS3的圆角技术，来仿写了QQ2012的主窗口，大家都知道QQ2012的主窗口现在都是使用的圆角框，看上去不那么呆板，用CSS3做圆角效果，也是学习CSS3的必修课，通过这一些小小的功能实现，你会慢慢了解CSS3的强大功能。

<!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圆角技术仿写了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">CuoXin</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>

上一篇：CSS3模仿的圆角Js弹出框效果，图片盒子

下一篇：css3的transition模仿Js的放大镜效果