html部分内容
复制代码代码如下:
<div class="header">
<div class="eye_left"></div>
<div class="eye_right">
<div class="eye_in"></div>
</div>
<div class="head_bottom"></div>
</div>
css部分
复制代码代码如下:
*{ padding:0; margin:0;}
.header{ width:300px; margin: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;
top:0px;}
.eye_right{
right:0px;
top: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;
top:120px;
z-index:-5;}
.eye_in{
background:#0C0;
height:30px;
width:30px;
position:absolute;
right:-30px;
top:-30px;
border:#FFF 30px solid;
border-radius:160px;
-moz-border-radius:160px;
-webkit-border-radius:160px;
-o-border-radius:160px;}
css3.0 图形构成实例练习一
2021-05-08 21:13:34声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。 如涉及版权问题,请提交至online#300.cn邮箱联系删除。
热门文章