新手入门：圆角使用方法详解，圆角形成原理以及各个值的意义

最新推荐文章于 2021-09-01 16:40:25 发布

不及你笑靥如花

最新推荐文章于 2021-09-01 16:40:25 发布

阅读量1.8k

点赞数 2

分类专栏： HTML+CSS基础知识文章标签： html css

本文链接：https://blog.csdn.net/qq_43775721/article/details/109580923

版权

HTML+CSS基础知识专栏收录该内容

10 篇文章

订阅专栏

使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”。

原理： border-radius: 值；

八个值：水平左上角水平右上角水平右下角水平左下角/ 垂直左上角垂直右上角垂直右下角垂直左下角
四个值: 左上角右上角右下角左下角
三个值: 左上角右上角和左下角右下角
两个值:左上角与右下角右上角与左下角
一个值：四个圆角值相同

以下为三个实例：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>圆角边框</title>
		<style type="text/css">
			div{
				text-align: center;
				color: white;
				font-size: 30px;
			}
			#box1{
				width: 200px;
				height: 100px;
				background-color: lightblue;
			
				border-radius: 100px 20px 30px 40px/ 50px 30px 40px 20px;
			}
			#box2{
				width: 200px;
				height: 100px;
				background-color: royalblue;
				/**
				 *以对角线 200px为左上右下 20px为右上左下
				 */
				border-radius: 200px 20px;
			}
			#box3{
				width: 200px;
				height: 100px;
				background-color: plum;
				/**
				 * 所有的都以50开始
				 */
				border-radius: 50px;
			}
		</style>
	</head>
	<body>
		<div id="box1">box1</div>
		
		<div id="box2">box2</div>
		
		<div id="box3">box3</div>
	</body>
</html>