16 制作圆&圆环及半角

用到的属性：

border-top-left-radius: 15px  # 右上角设置圆角
border-top-left-radius: 15px 30px  # 水平对齐x,y切角
# 其中还是有方向上的互换，改变方位设置即可。
top / bettom
left / right

border-radius: 50%;  切出圆形

切出椭圆形
.xx{
	width: 200px;
	height: 100px;
	border-radius: 50%;
}

切出半圆形
.xx{
	width: 200px;
	height: 100px;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>边框属性</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: red;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

image

posted @ 2022-08-05 11:14  角角边  Views(198)  Comments(0)    收藏  举报