<!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 圆角实现例子,无图实现CSS圆角
div+css实现圆角导航菜单的效果。
用js实现css3效果的圆角方法，代码简洁方便，效果很不错，跟大家分享一下！！
iecss3.htc css3圆角支持文件
css3.htc 兼容IE8圆角 需引入的文件 css3.htc 兼容IE8圆角 需引入的文件 css3.htc 兼容IE8圆角 需引入的文件
CSS3圆角详解 一、CSS3圆角的优点 传统的圆角生成方案，必须使用多张图片作为背景图案。CSS3的出现，使得我们再也不必浪费时间去制作这些图片了，而且还有其他多个优点： * 减少维护的工作量。图片文件的生成、更新...
用CSS实现圆角框框.txt用CSS实现圆角框框.txt用CSS实现圆角框框.txt用CSS实现圆角框框.txt
css3圆角效果，能使网页做的更有个性。
css实现圆角效果，写的很详细 很不错
一、图片实现圆形条件 原本不是圆形图片，通过CSS样式布局... 三、CSS圆角实现图片圆形实例 首先一张正方形图片，放入一个DIV盒子内，通过对盒子内图片设置border-radius:50%实现圆形效果。 本案例在DIVCSS5初始
用CSS实现无图片圆角效果!里面有好几种哦！
css圆角css圆角css圆角css圆角css圆角css圆角css圆角css圆角css圆角css圆角
为HTML网页做圆角。汇集css 无图片圆角，CSS圆角区块容器，div + CSS 圆角矩，WEB2.0 圆形边框 div 使用 css 做法。
目前CSS3的应用已经越来越普及了，它最常见的一个圆角功能非常的不错，可以省略掉不少图片从而直接用代码实现按钮的渐变、描边、阴影等效果，本实例就是一款直接用CSS3实现的，无需其他任何JS或者flash、亦不需任何...
css用图片实现圆角边框的效果 css用图片实现圆角边框的效果
CSS3实现圆角阴影渐变效果兼容IE，火狐等主流浏览器，用过都说很好用，你懂的。
最基本的css3效果,很好用，很强大，值得参考使用。
运用css技术就能显示出圆角的效果，避免用图片在ie6中显示边边角角的问题，与图片透明不足的效果交替。
css_圆角矩形 css_圆角矩形 css_圆角矩形
纯css实现div圆角，代码简单易懂，没有js那么麻烦，缺点是效果有点小缺憾