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地址:18.188.76.209,归属地:俄亥俄州Dublin ,欢迎您的访问!
文章链接:https://www.lilianhua.com/css3-implements-xiaomi-rounded-logo.html
Popup Image

通知

本站原则上是免费提供技术支持,但是服务器维护和运营成本高,可以实行自由赞助:赞助

Loading...