CSS3实现小米圆角logo
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3实现小米logo </title>
<style type="text/css">
body{
background-color: #ccc;
}
#main{
background-color: #f57923;
width: 600px;
height: 600px;
margin:150px auto;
border-radius: 75px;
}
#left,#right{
background-color: #fff;
margin-top:200px;
height: 220px;
}
#left{
float: left;
width: 250px;
margin-left: 130px;
border-top-right-radius: 65px;
z-index: -99999;
}
#inner{
background-color: #f57923;
width: 140px;
height: 170px;
margin-left: 55px;
margin-top: 50px;
border-top-right-radius:39px;
z-index: 10px;
}
#center{
background-color: #fff;
position: relative;
width: 50px;
height: 125px;
top:45px;
left: 45px;
z-index:999999; }
#right{
float: right;
width: 50px;
margin-right:150px;}
</style>
</head>
<body>
<div id="main">
<div id="left">
<div id="inner">
<div id="center"></div>
</div>
</div>
<div id="right"></div>
</div>
</body>
</html>
温馨提示 : 非特殊注明，否则均为©李联华的博客网原创文章，本站文章未经授权禁止任何形式转载;IP地址：44.222.82.133，归属地:弗吉尼亚州Ashburn ，欢迎您的访问!
文章链接：https://www.ooize.com/css3-implements-xiaomi-rounded-logo.html
文章链接：https://www.ooize.com/css3-implements-xiaomi-rounded-logo.html
订阅
登录
0 评论
