您的位置：首页 > Web前端 > CSS

CSS3新属性 border-radius版企鹅

2016-07-11 21:58 435 查看

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin-top: 100px;
margin-left: 500px;
}
.head{
width: 300px;
height: 240px;
border: 1px solid black;
background-color: #000;
position: relative;
border-radius: 150px 150px 150px 150px / 160px 160px 80px 80px;
}
.eye1, .eye2{
height: 70px;
width: 50px;
background-color: white;
border-radius: 25px / 35px;
}
.eye1{
position: absolute;
left: 90px;
top: 70px;
}
.eye2{
position: absolute;
left: 170px;
top: 70px;
}
.qiu1{
width: 24px;
height: 30px;
border-radius: 24px / 30px;
background-image: -webkit-radial-gradient(30% 70%, white, black 10%);
position: absolute;
top: 18px;
left: 14px;
}
.qiu2{
width: 24px;
height: 30px;
border-radius: 24px / 30px;
background-image: -webkit-radial-gradient(30% 60%, white, black 20%);
position: absolute;
top: 18px;
left: 10px;
}
.bai1{
width: 12px;
height: 12px;
border-radius: 12px;
background-image: -webkit-radial-gradient(white 30%, black);
position: absolute;
top: 7px;
left: 8px;
}
.bai2{
width: 22px;
height: 27px;
border-radius: 22px / 27px;
background: white;
position: absolute;
top: 7px;
left: 1px;
}
.zui{
width: 190px;
height: 60px;
border-radius: 190px / 60px;
background-color: #FFC545;
position: absolute;
top: 150px;
left: 60px;
}
.hei{
width: 150px;
height: 40px;
border-radius: 150px / 40px;
background-color: black;
position: absolute;
top: 25px;
left: 20px;
}
.huang{
width: 150px;
height: 50px;
border-radius: 150px / 50px;
background-color: #FFC545;
position: absolute;
top: 14px;
left: 20px;
}/*
.weibo{
width: 320px;
height: 240px;
border-radius: 320px / 240px;
background-color: #FE0000;
position: absolute;
top: 140px;
left: 500px;
}*/
.body{
width: 360px;
height: 380px;
border-radius: 360px / 380px;
background-color: #000;
position: absolute;
top: 200px;
left: 470px;

}
.bodybai{
width: 300px;
height: 340px;
border-radius: 300px / 340px;
background-color: #fff;
position: absolute;
top: 20px;
left: 30px;
}
.left{
position: absolute;
width: 160px;
height: 80px;
border: 1px solid pink;
background-color: #FFC545;
border-radius: 160px / 80px;
top: 530px;
left: 470px;
}
.right{
position: absolute;
width: 160px;
height: 80px;
border: 1px solid pink;
background-color: #FFC545;
border-radius: 160px / 80px;
top: 530px;
left: 670px;
}
.shou1{
position: absolute;
width: 60px;
height: 210px;
border: 1px solid pink;
background-color: black;
border-radius: 60px 0px 60px 0px / 210px 70px 140px 0px;
top: 300px;
left: 440px;
}
.shou2{
position: absolute;
width: 60px;
height: 210px;
border: 1px solid pink;
background-color: black;
border-radius: 0px 60px 0px 60px / 70px 210px 0px 140px;
top: 300px;
left: 795px;
}
.huangguan{
position: absolute;
top: 0px;
left: 520px;
}
.huangguan img{
width: 260px;
height: 150px;

}
.body p{
position: absolute;
font-size: 30px;
top: 150px;
left: 210px;
color: #AD052D;

}
</style>

</head>

<body>
<div class="right"></div>
<div class="left"></div>
<div class="shou1"></div>
<div class="shou2"></div>

<div class="body">
<div class="bodybai"></div>
<p>程序媛</p>
</div>

<div class="head">
<div class="eye1">
<div class="qiu1">
<div class="bai1"></div>
</div>
</div>
<div class="eye2">
<div class="qiu2">
<div class="bai2"></div>
</div>
</div>
<div class="zui">
<div class="hei"></div>
<div class="huang"></div>
</div>
</div>
<div class="huangguan">
<img src="huangguan.png" alt="">
</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3 html5

相关文章推荐

新的分享

章节导航