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地址:3.233.242.67,欢迎您的访问!

温馨提示 : 非特殊注明,否则均为李联华的博客原创文章,本站文章未经授权禁止任何形式转载
文章链接:https://www.ooize.com/css3-implements-xiaomi-rounded-logo.html

订阅文章

在下面输入您的电子邮件地址以订阅我们的文章

订阅
提醒
guest

0 评论
内联反馈
查看所有评论
Loading...