圆角属性及其设置

最新推荐文章于 2025-01-10 16:03:08 发布

Stirve unremitting

最新推荐文章于 2025-01-10 16:03:08 发布

阅读量966

点赞数

分类专栏：笔记文章标签： css css3 html html5

本文链接：https://blog.csdn.net/weixin_46421045/article/details/104977219

版权

笔记专栏收录该内容

96 篇文章

订阅专栏

本文详细介绍了CSS3中的圆角属性，包括border-radius的使用方法，如何创建不同类型的圆角效果，以及在HTML5中应用这些技巧实现响应式设计。通过实例解析，帮助开发者掌握创建美观且实用的圆角元素的技能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.box{
				width: 200px;
				height: 200px;
				background: red;
				margin: 100px;
				border-radius:10px 50px 70px 100px;
				border-radius:10px 30px 40px 50px/40px 30px 30px 10px;
			}
			
			.box1{
				width: 200px;
				height: 200px;
				background: skyblue;
				margin: 100px;
				border-radius:100px;
				position:relative;
			}
			.box2{
				width: 150px;
				height: 150px;
				background: #fff;
				border-radius:75px;
				position:absolute;
				left:25px;
				bottom:4px;
			}
			span{
				display:block;
				width: 100px;
				height:50px;
				border-bottom:2px solid #000;
				border-radius:0px 0px 50px 50px;
				position:absolute;
				left:25px;
				bottom:20px;
			}
		</style>
	</head>
	<body>
		<!--
			圆角:圆角变化呈顺时针变化
			border-radius:四个角;
			border-radius:左上右下  右上左下;
			border-radius:左上  右上左下   右下;
			border-radius:左上  右上  右下  左下;
			px %
			
			border-radius:水平圆角/垂直圆角;
		-->
		<div class="box"></div>
		
		<div class="box1">
			<div class="box2">
				<span></span>
			</div>
		</div>
	</body>
</html>