css3.0 图形构成实例练习一
网站建设 2023-01-28 20:49www.1681989.com免费网站
html部分内容
<div class="header">
<div class="eye_left"></div>
<div class="eye_right">
<div class="eye_"></div>
</div>
<div class="head_bottom"></div>
</div>
css部分
{ paddg:0; marg:0;}
.header{ width:300px; marg:100px auto; position:relative; }
.eye_left,.eye_right{
width:30px;
height:30px;
background:#FFF;
position:absolute;
border:70px solid #0C0;
border-radius:160px;
-moz-border-radius:160px;
-webkit-border-radius:160px;
-o-border-radius:160px;}
.eye_left{
left:10px;
:0px;}
.eye_right{
right:0px;
:0px;}
.head_bottom{
width:200px;
border:#0C0 solid 60px;
border-radius:160px;
-moz-border-radius:160px;
-webkit-border-radius:160px;
-o-border-radius:160px;
height:30px;
left:0px;
position:absolute;
:120px;
z-dex:-5;}
.eye_{
background:#0C0;
height:30px;
width:30px;
position:absolute;
right:-30px;
:-30px;
border:#FFF 30px solid;
border-radius:160px;
-moz-border-radius:160px;
-webkit-border-radius:160px;
-o-border-radius:160px;}
复制代码
代码如下:<div class="header">
<div class="eye_left"></div>
<div class="eye_right">
<div class="eye_"></div>
</div>
<div class="head_bottom"></div>
</div>
css部分
复制代码
代码如下:{ paddg:0; marg:0;}
.header{ width:300px; marg:100px auto; position:relative; }
.eye_left,.eye_right{
width:30px;
height:30px;
background:#FFF;
position:absolute;
border:70px solid #0C0;
border-radius:160px;
-moz-border-radius:160px;
-webkit-border-radius:160px;
-o-border-radius:160px;}
.eye_left{
left:10px;
:0px;}
.eye_right{
right:0px;
:0px;}
.head_bottom{
width:200px;
border:#0C0 solid 60px;
border-radius:160px;
-moz-border-radius:160px;
-webkit-border-radius:160px;
-o-border-radius:160px;
height:30px;
left:0px;
position:absolute;
:120px;
z-dex:-5;}
.eye_{
background:#0C0;
height:30px;
width:30px;
position:absolute;
right:-30px;
:-30px;
border:#FFF 30px solid;
border-radius:160px;
-moz-border-radius:160px;
-webkit-border-radius:160px;
-o-border-radius:160px;}
上一篇:css常用浮出层的写法及实例
下一篇:流行浏览器内核分类及不同版本的样式区别