CSS3案例之安卓机器人图形

最新推荐文章于 2022-07-10 20:18:28 发布

宅羽

最新推荐文章于 2022-07-10 20:18:28 发布

阅读量567

点赞数

分类专栏： CSS3案例

本文链接：https://blog.csdn.net/sky6even/article/details/88540325

版权

CSS3案例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS 边框</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #F7F7F7;
		}
		.board {
			width: 600px;
			height: 440px;
			margin: 80px auto;
			background-color: #FFF;
		}
		.android {
			width: 340px;
			padding-top: 40px;
			margin: 0 auto;
			position: relative;
		}
		/*脑袋*/
		.head {
			width: 220px;
			height: 100px;
			margin: 0 auto 10px;
			border-radius: 100px 100px 0 0;
			background-color: #A4CA39;
			position: relative;
		}
		/*眼晴*/
		.head::before,
		.head::after {
			content: '';
			display: block;
			width: 20px;
			height: 20px;
			background-color: #FFF;
			border-radius: 10px;
			position: absolute;
			top: 40px;
		}
		
		.head::before {
			left: 50px;
		}

		.head::after {
			right: 50px;
		}
		
		/*身体*/
		.body {
			width: 220px;
			height: 180px;
			margin: 0 auto;
			background-color: #A4CA39;
			border-radius: 0 0 20px 20px;
			position: relative;
		}
		/*腿*/
		.body::before,
		.body::after {
			content: '';
			display: block;
			width: 50px;
			height: 80px;
			background-color: #A4CA39;
			border-radius: 0 0 25px 25px;
			position: absolute;
			bottom: -80px;
		}

		.body::before {
			left: 40px;
		}

		.body::after {
			right: 40px;
		}
		/*胳膊*/
		.arms {
			width: 340px;
			height: 150px;
			position: absolute;
			top: 150px;
		}
		.arms::before,
		.arms::after {
			content: '';
			display: block;
			width: 50px;
			height: 150px;
			background-color: #AcCA39;
			border-radius: 25px;
			position: absolute;
		}

		.arms::before {
			left: 0;
		}
		.arms::after {
			right: 0;
		}
	</style>
</head>
<body>
	<div class="board">
		<div class="android">
			<div class="head"></div>
			<div class="body"></div>
			<div class="arms"></div>
		</div>
	</div>
</body>
</html>