border-radius知识点详解，包含如何画圆、如何画椭圆，并且实现用css画一个哆啦A梦

已于 2022-05-31 15:31:00 修改
阅读量938 收藏 2
点赞数 1
分类专栏： 样式 文章标签： css css3 html
于 2022-05-31 15:21:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40563746/article/details/125064705
版权

border-radius CSS 图形设计 哆啦A梦 前端开发
关键词由CSDN通过智能技术生成

用到的知识点：border-radius

知识点说明：border-radius有四个方向（左上、右上、右下、左下）、两个半径（水平半径、垂直半径）。写birder-radius属性的时候，先写水平半径，再写垂直半径，中间用/隔开。例如：

border-radius: 10px 10px 20px 20px / 10px 10px 20px 20px
分别表示：左上水平半径 右上水平半径 右下水平半径 左下水平半径 / 左上垂直半径 右上垂直半径 右下垂直半径 左下垂直半径

省略的写法和padding、margin一致，/左右两边分别省略。例如可以写成：

border-radisu:15px/10px 10px 20px 20px;表示四个角的水平半径是15px,四个角的垂直半径分别为10px 10px 20px 20px;
border-radius:15px 5px /10px 20px;表示左上角和右下角的水平半径为15px，右上角和左下角的水平半径为5px,左上角和右下角的垂直半径为10px，右上角和左下角的垂直半径为20px
border-radius:15px/25px;表示四个角的水平半径都是15px,四个角的垂直半径都是25px;

当/省略时，表示四个角的每个角的水平半径和垂直半径相等。

border-radius:10px 20px 30px 15px;表示左上角的水平半径和垂直半径都是10px，右上角的水平半径和垂直半径都是20px，右下角的水平半径和垂直半径都是30px，左下角的水平半径和垂直半径都是15px.

圆和椭圆的水平半径都是宽的一半，垂直半径都是高的一半，可以写成border-radisu:50% / 50%;也可以写成：border-radius:50%;

一个小练习，用border-radius画一个哆啦A梦
效果如图:
在这里插入图片描述

具体实现如下：

<!DOCTYPE html>
<html>
<head>
	<title>
		border-radius实现哆啦A梦
	</title>
	<style type="text/css">
		.container{
			width: 560px;
			height: 800px;
			display: flex;
			flex-direction: column;
			align-items: center;
			border:1px solid black;
		}
		.head{
			width: 460px;
			height: 460px;
			border: 1px solid black;
			border-radius: 55%;
			background-color: blue;
			position: relative;
		}
		.face{
			width: 410px;
			height: 370px;
			border: 1px solid black;
			border-radius: 255px;
			background-color: white;
			position: absolute;
			bottom: 5px;
			left: 25px;
		}
		.eye{
			margin-top: -40px;
			display: flex;
			justify-content: center;
		}
		.eye-left{
			width: 96px;
			height: 100px;
			border: 1px solid black;
			border-radius: 50% 55% 50% 55%;
			background-color: white;
		}
		.eye-left-inner{
			width: 30px;
			height: 28px;	
			border-radius:15px 15px 0 0 / 28px 28px 0 0 ;
			margin-top: 30px;
			margin-left: 50px;
			border-width: 1px;
			border-style: solid;
			border-color: black black transparent black;
			

		}
		.eye-right{
			width: 96px;
			height: 100px;
			border: 1px solid black;
			border-radius: 55% 50% 55% 50%;
			background-color: white;
		}
		.eye-right-eyeball{
			width: 30px;
			height: 56px;
			background-color: black;
			border-radius: 50%;
			margin-top: 20px;
			margin-left: 15px;
			position: relative;
		}
		.eye-right-point{
			width: 10px;
			height: 18px;
			background-color: white;
			border-radius: 50%;
			position: absolute;
			top: 16px;
			left: 4px;
		}

		.neck{
			width: 330px;
			height: 30px;
			background-color: blue;
			border-radius: 20px;
			margin-top: -50px;
			z-index: 99;
			position: relative;
			border:1px solid black;
		}
		.bell{
			width: 56px;
			height: 56px;
			background-color: yellow;
			border:1px solid grey;
			border-radius: 50%;
			position: absolute;
			top: 0;
			left: 137px;
			display: flex;
			flex-direction: column;
			align-items: center;

		}
		.bell-striping{
			width: 48px;
			height:6px;
			border-radius: 3px;
			background-color: grey;
			margin-top: 10px;
			border:1px solid #ccc;
		}
		.bell-hole{
			width: 16px;
			height: 16px;
			border-radius: 50%;
			background-color: black;
			margin-top: 6px;
		}
		.bell-vertical-bar{
			width: 4px;
			height: 20px;
			background-color: black;
		}
		/*身体部分start*/
		.body-block{
			width: 540px;
			height: 190px;
			position: relative;
		}
		.arm-left{
			height: 60px;
			width: 150px;
			border: 1px solid black;
			background-color: blue;
			transform: rotate(-45deg);
			position: absolute;
			top:10px;
			left: 25px;

		}
		.hand-left{
			width: 70px;
			height: 70px;
			background-color: white;
			border:1px solid black;
			border-radius: 50%;
			position: absolute;
			top: 48px;
			left: 20px;

		}
		.body{
			width: 320px;
			height: 190px;
			background-color: blue;
			border-width: 1px;
			border-style: solid;
			border-color: transparent black black black;
			position: absolute;
			left: 110px;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.belly-top{
			width: 280px;
			height: 50px;
			background-color: white;
			border-width: 1px;
			border-style: solid;
			border-color: black black transparent black;
		}
		.belly-bottom{
			width: 280px;
			height: 110px;
			background-color: white;
			border-radius:  0 0 110px 110px;
			border-width: 1px;
			border-style: solid;
			border-color: transparent black black  black;
		}
		.pocket{
			width: 200px;
			height: 80px;
			border:1px solid black;
			background-color: white;
			border-radius:  0 0 110px 110px;
			margin: 0 auto;
		}
		.arm-right{
			height: 60px;
			width: 150px;
			border: 1px solid black;
			background-color: blue;
			transform: rotate(45deg);
			position: absolute;
			top:15px;
			right: 20px;

		}
		.hand-right{
			width: 70px;
			height: 70px;
			background-color: white;
			border:1px solid black;
			border-radius: 50%;
			position: absolute;
			top: 55px;
			right: 18px;

		}
		.leg{
			width: 360px;
			height: 50px;
			position: relative;
			z-index: 99;
			margin-top: -20px;
		}
		.leg-round{
			width: 45px;
			height: 45px;
			background-color: white;
			margin: 0 auto;
			border-width: 1px;
			border-style: solid;
			border-color: black black transparent black;
			border-radius: 100% 100% 0 0;
		}
		.two-leg{
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: -25px;
		}
		.leg-left,.leg-right{
			width: 170px;
			height: 28px;
			border-radius: 14px;
			background-color: white;
			border:1px solid black;
		}
		
		/*身体部分end*/
		/*鼻子、胡须、嘴巴start*/
		.nose-and-mouth{
			width: 100%;
			margin-top: -20px;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.nose{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		/*鼻头*/
		.noseguard{
			width: 60px;
			height: 60px;
			background-color: red;
			border-radius: 1px solid black;
			border-radius: 50%;
		}
		.noseguard-point{
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background-color: white;
			margin-top: 10px;
			margin-left: 15px;
		}
		/*人中*/
		.philtrum{
			width: 4px;
			height: 206px;
			background-color: black;
		}
		/*胡须*/
		.moustache{
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: -206px;
		}
		.moustache-left,.moustache-right{
			width: 150px;
			height: 140px;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			justify-content: space-between;;
		}
		.moustache-left-top,.moustache-left-middle,.moustache-left-bottom,.moustache-right-top,.moustache-right-middle,.moustache-right-bottom{
			width: 150px;
			height: 4px;
			background-color: black;
		}
		.moustache-left-top{
			transform:rotate(10deg);
		}
		.moustache-left-bottom{
			transform:rotate(-10deg);
		}
		.moustache-right-top{
			transform:rotate(-10deg);
		}
		.moustache-right-bottom{
			transform:rotate(10deg);
		}
		/*嘴巴*/
		.mouth{
			width: 320px;
			height: 320px;
			margin: -260px auto 0;
			border-width: 4px;
			border-style: solid;
			border-color:transparent transparent black transparent;
			border-radius: 160px;
		}
		/*鼻子、胡须、嘴巴end*/
		/*眼睛start*/
		/*眼睛end*/
	</style>
</head>
<body>
	<div class="container">
		<div class="head">
			<div class="face">
				<div class="eye">
					<div class="eye-left">
						<div class="eye-left-inner"></div>
					</div>
					<div class="eye-right">
						<div class="eye-right-eyeball">
							<div class="eye-right-point"></div>
						</div>
					</div>
				</div>
				<div class="nose-and-mouth">
					<div class="nose">
						<!--鼻头-->
						<div class="noseguard">
							<div class="noseguard-point"></div>
						</div>
						<!--人中-->
						<div class="philtrum"></div>
					</div>
					<!--胡子-->
					<div class="moustache">
						<div class="moustache-left">
							<div class="moustache-left-top"></div>
							<div class="moustache-left-middle"></div>
							<div class="moustache-left-bottom"></div>
						</div>
						<div class="moustache-right">
							<div class="moustache-right-top"></div>
							<div class="moustache-right-middle"></div>
							<div class="moustache-right-bottom"></div>
						</div>
					</div>
				</div>
				<div class="mouth"></div>
			</div>
			
			
			
		</div>
		<!--脖子start-->
		<div class="neck">
			<!--铃铛start-->
			<div class="bell">
				<div class="bell-striping"></div>
				<div class="bell-hole"></div>
				<div class="bell-vertical-bar"></div>
			</div>
			<!--铃铛end-->
		</div>
		<!--脖子end-->
		<!--身体部分start-->
		<div class="body-block">
			<!--左胳膊-->
			<div class="arm-left"></div>
			<div class="hand-left"></div>
			
			<!--右胳膊-->
			<div class="arm-right"></div>
			<div class="hand-right"></div>
			<!--身体-->
			<div class="body">
				<div class="belly-top"></div>
				<div class="belly-bottom">
					<div class="pocket"></div>
				</div>
			</div>
		</div>
		<div class="leg">
			<div class="leg-round"></div>
			<div class="two-leg">
				<div class="leg-left"></div>
				<div class="leg-right"></div>
			</div>
		</div>
		<!--身体部分end-->
	</div>
		


</body>
</html>
乔朵朵
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值