使用伪元素，border-radius, 绘制安卓机器人

最新推荐文章于 2024-06-01 15:06:32 发布

xqiitan

最新推荐文章于 2024-06-01 15:06:32 发布

阅读量775

点赞数 1

分类专栏： h5

本文链接：https://blog.csdn.net/xqiitan/article/details/88128202

版权

h5 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>安卓机器人 的实现</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			body {
				background-color: #ccc;
			}
			.content {
				width: 500px;
				height: 500px;
				border: 1px red solid;
				margin: 50px auto;
			}

			.an_header {
				width: 250px;
				height: 125px;
				background-color: darkgreen;
				margin: 10px auto;
				border-radius: 125px 125px 0px 0px;
				position: relative;
			}
			/* 使用伪元素，添加左边眼睛：提取公共代码，再复写单独的某个样式 */
			.an_header::before,
			.an_header::after {
				/* 1 设置content属性 */
				content: "";
				/* 2 如果需要设置宽度，就应该转换其为块级元素，它默认是行级元素float position block*/
				position: absolute;
				width: 20px;
				height: 20px;
				bottom: 40px;
				border-radius: 10px;
				background-color: #fff;
			}
			.an_header::before {
				left: 70px;
			}
			.an_header::after {
				right: 70px;
			}

			.an_body {
				width: 250px;
				height: 250px;
				background-color: darkgreen;
				border-radius: 0px 0px 20px 20px;
				margin: 0px auto;
				position: relative;
			}
			.an_body::before,
			.an_body::after {
				content: "";
				position: absolute;
				background-color: darkgreen;
				width: 30px;
				height: 180px;
				border-radius: 10px;
				top: 20px;
			}
			.an_body::before {
				left: -40px;
				/* 向左移动40px */
			}
			.an_body::after {
				right: -40px;
			}
			
			.an_footer {
				width: 250px;
				height: 100px;
				margin: 0px auto;
				position: relative;
			}
			.an_footer::before,
			.an_footer::after {
				content: "";
				position: absolute;
				background-color: darkgreen;
				width: 30px;
				height: 90px;
				border-radius: 0 0 10px 10px;
			}
			.an_footer::before {
				left: 50px;
			}
			.an_footer::after {
				right: 50px;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="an_header"></div>
			<div class="an_body"></div>
			<div class="an_footer"></div>
		</div>
	</body>
</html>

xqiitan

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用伪元素，border-radius, 绘制安卓机器人

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;安卓机器人的实现&lt;/title&gt; &lt;style type="text/css"&gt; * { padding: 0;
复制链接

扫一扫

专栏目录