圆角制作"多来A梦"

在这里插入图片描述
.box1{
width: 200px;
height: 200px;
background: skyblue;
border-radius: 100px;
position: relative;
margin: 0 auto;
border: 3px solid black;
box-shadow: 7px 5px 6px white inset ;

		}
		.box2{
			width: 150px;
			height: 135px;
			background: #fff;
			border-radius: 50% / 50%;
			position: absolute;
			left: 25px;
			bottom: 10px;
			border: 3px solid black;
		}
		.yanjing1{
			height: 40px;
			width: 30px;
			border-radius: 30px;
			border: 3px solid black;
			position: absolute;
			left: 65px;
			top: 15px;
			z-index: 5;
			background: white;
		}
		.yanjing2{
			height: 40px;
			width: 30px;
			border-radius: 30px;
			border: 3px solid black;
			position: absolute;
			right: 63px;
			top: 15px;
			z-index: 5;
			background: white;
		}
		.yanzhu1{
			width: 10px;
			height: 10px;
			background: black;
			border-radius: 30px;
			position: absolute;
			bottom: 10px;
			right: 5px;
		}
		.yanzhu2{
			width: 10px;
			height: 10px;
			background: black;
			border-radius: 30px;
			position: absolute;
			bottom: 10px;
			left: 5px;
		}
		span{
			display: block;
			width: 80px;
			height: 100px;
			border-bottom: 1px solid #000;
			border-radius: 0px 0px 50px 50px;
			position: absolute;
			left: 33px;
			bottom: 20px;
		}
		.bizi{
			height: 30px;
			width: 30px;
			position: absolute;
			background: red;
			border-radius: 50%;
			left: 56px;
			top: 25px;
			border: 3px solid black;
			box-shadow: 6px 2px 13px white inset ;
		}
		.biliang{
			height: 57px;
			width: 3px;
			background: black;
			position: absolute;
			left: 72px;
			top: 58px;
		}
		.huxu1{
			width: 35px;
			height: 3px;
			background: black;
			position: absolute;
			left: 20px;
			top: 70px;
		}
		.huxu2{
			width: 35px;
			height: 3px;
			background: black;
			position: absolute;
			left: 20px;
			top: 60px;
			transform: rotate(190deg) ;
		}
		.huxu3{
			width: 35px;
			height: 3px;
			background: black;
			position: absolute;
			left: 20px;
			top: 80px;
			transform: rotate(170deg) ;
		}
		.huxu4{
			width: 35px;
			height: 3px;
			background: black;
			position: absolute;
			right: 20px;
			top: 70px;
		}
		.huxu5{
			width: 35px;
			height: 3px;
			background: black;
			position: absolute;
			right: 20px;
			top: 60px;
			transform: rotate(-10deg) ;
		}
		.huxu6{
			width: 35px;
			height: 3px;
			background: black;
			position: absolute;
			right: 20px;
			top: 80px;
			transform: rotate(10deg) ;
		}
		p{
			width: 150px;
			height: 15px;
			background: #DF5000;
			position: absolute;
			margin-left: -78px;
			left: 50%;
			margin-top: -25px;
			border-radius: 10px;
			border: 3px solid black;
			z-index: 10;
		}
		.shenti{
			height: 100px;
			width: 140px;
			background: skyblue;
			position: relative;
			left: 50%;
			margin-left: -73px;
			margin-top: -5px;
			border: 3px solid black;
			border-top: none;
			box-shadow: 2px -1px 27px black inset ;
		}
		.pifu{
			height: 100px;
			width: 100px;
			border-radius: 50%;
			background: white;
			position: absolute;
			left: 50%;
			margin-left: -52px;
			top: -20px;
			border: 3px solid #000000;
		}
		.lingdang{
			height: 30px;
			width: 30px;
			background: yellow;
			border-radius: 50%;
			position: relative;
			left: 50%;
			margin-left: -17px;
			top: 9px;
			overflow: hidden;
			border: 3px solid black;
			z-index: 30;
			box-shadow: 7px 5px 6px white inset ;
		}
		.xian1{
			height: 2px;
			width: 30px;
			background: black;
			top: 10px;
			position: absolute;
		}
		.xian2{
			height: 2px;
			width: 30px;
			background: black;
			top: 6px;
			position: absolute;
		}
		.tuoyuan{
			height: 10px;
			width: 10px;
			border-radius: 50%;
			background: black;
			position: absolute;
			bottom: 6px;
			left: 10px;
		}
		.shuxian{
			position: absolute;
			width: 2px;
			height: 5px;
			bottom: 1px;
			left: 14px;
			background: black;
		}
		.koudai{
			position: absolute;
			width: 70px;
		    height: 35px;
			border:3px solid black;
			background-color:white;
			border-radius: 0px 0px 100px 100px;
			left: 13px;
			top: 53px;
		}
		.zuo{
			height: 40px;
			width: 40px;
			border: 3px solid black;
			border-radius: 50%;
			position: absolute;
			left: 630px;
			top: 220px;
		}
		.you{
			height: 40px;
			width: 40px;
			border: 3px solid black;
			border-radius: 50%;
			position: absolute;
			left: 860px;
			top: 220px;
		}
		.zuojiao{
		position: absolute;
		height: 20px;
		width: 90px;
		border: 3px solid black;
		left: 50%;
		margin-left: -100px;
		top: 309px;
		border-radius: 100px 90px 90px 50px;
		}
		.youjiao{
		position:absolute;
		height: 20px;
		width: 90px;
		border: 3px solid black;
		left: 50%;
		margin-left: 5px;
		top: 309px;
		border-radius: 90px 100px 50px 90px;
		}
		.zuogebo{
			width: 35px;
			height: 3px;
			position: absolute;
			left: 50%;
			margin-left:-105px;
			background: black;
			top: 217px;
			transform: rotate(155deg);
		}
		.yougebo{
			width: 35px;
			height: 3px;
			position: absolute;
			left: 50%;
			margin-left:70px;
			background: black;
			top: 217px;
			transform: rotate(24deg);
		}
	</style>
</head>
<body>
	<div class="box1">
		<h1 class="yanjing1">
			<div class="yanzhu1"></div>
		</h1>
		<h1 class="yanjing2">
			<div class="yanzhu2"></div>
		</h1>
		<div class="box2">
			<span></span>
			<div class="bizi"></div>
			<div class="biliang"></div>
			<div class="huxu1"></div>
			<div class="huxu2"></div>
			<div class="huxu3"></div>
			<div class="huxu4"></div>
			<div class="huxu5"></div>
			<div class="huxu6"></div>
		</div>
	</div>
	<p></p>
	<div class="shenti">
		<div class="pifu">
			<div class="lingdang">
				<div class="xian1"></div>
				<div class="xian2"></div>
				<div class="tuoyuan"></div>
				<div class="shuxian"></div>
			</div>
			<div class="koudai"></div>
		</div>
	</div>
	<div class="zuojiao"></div>
	<div class="youjiao"></div>
	<div class="zuo"></div>
	<div class="you"></div>
	<div class="zuogebo"></div>
	<div class="yougebo"></div>
	
</body>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值