在网页设计中，圆角矩形因其美观和现代感而被广泛使用，居中显示元素也是一个常见的需求。今天，我们将学习如何使用CSS3的border-radius属性来创建圆角矩形，并将其居中显示在页面上。
如果你正在学习CSS，那么这个实例将非常适合你练手。如果想要更生动的学习CSS，推荐编程狮W3Cschool的HTML + CSS 基础实战，它能让你像玩游戏一样闯关中掌握更多的多前端开发实用技巧。
👉如果你没有HTML基础请先学习《HTML入门课程(含HTML5)》
一、创建圆角矩形
首先，我们来看如何创建一个圆角矩形：
.rectangle { <!-- 定义矩形样式 -->
width: 400px; <!-- 设置矩形宽度为400像素 -->
height: 300px; <!-- 设置矩形高度为300像素 -->
background-color: #4CAF50; /* 设置背景颜色为绿色 */
border: 2px solid #000; /* 设置边框为2像素的黑色实线 */
border-radius: 10px; /* 设置圆角为10像素 */
}要使用CSS3创建圆角矩形，你需要使用border-radius属性。border-radius属性允许你为元素的四个角设置圆角。以下是一些基本的使用方法：
单个值
如果你为border-radius属性提供一个值，那么这个值将应用于所有四个角：
css
.rectangle {
border-radius: 10px; /* 所有四个角都是10px的圆角 */
}两个值
如果你提供两个值，第一个值将应用于左上角和右下角，第二个值将应用于右上角和左下角：
css
.rectangle {
border-radius: 10px 20px; /* 左上角和右下角是10px的圆角，右上角和左下角是20px的圆角 */
}三个值
如果你提供三个值，第一个值将应用于左上角，第二个值将应用于右上角和左下角，第三个值将应用于右下角：
css
.rectangle {
border-radius: 10px 20px 30px; /* 左上角是10px的圆角，右上角和左下角是20px的圆角，右下角是30px的圆角 */
}四个值
如果你提供四个值，它们将分别应用于左上角、右上角、右下角和左下角：
css
.rectangle {
border-radius: 10px 20px 30px 40px; /* 左上角是10px的圆角，右上角是20px的圆角，右下角是30px的圆角，左下角是40px的圆角 */
}当然你也可以使用编程狮上的在线生成CSS圆角工具来快速一键获取圆角的css代码
- 圆角生成器
- CSS3 border-radius(圆角)效果在线调试工具
二、居中显示
要将圆角矩形居中显示，我们可以使用以下两种方法之一：
方法1：使用Flexbox
将矩形包裹在一个容器中，并使用Flexbox来居中它：
<!DOCTYPE html> <!-- 定义文档类型为HTML5 -->
<html>
<head>
<meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->
<title>居中显示圆角矩形示例 | 编程狮(w3cschool.cn)</title> <!-- 页面标题 -->
<style>
.container { /* 定义容器样式 */
display: flex; /* 使用Flexbox布局 */
justify-content: center; /* 水平居中子元素 */
align-items: center; /* 垂直居中子元素 */
height: 100vh; /* 使容器高度占满整个视口高度 */
}
.rectangle { /* 定义矩形样式 */
width: 400px; /* 设置矩形宽度为400像素 */
height: 300px; /* 设置矩形高度为300像素 */
background-color: #4CAF50; /* 设置背景颜色为绿色 */
border: 2px solid #000; /* 设置边框为2像素的黑色实线 */
border-radius: 10px; /* 设置圆角为10像素 */
}
</style>
</head>
<body>
<div class="container"> <!-- 使用容器类 -->
<div class="rectangle"></div> <!-- 使用矩形类 -->
</div>
</body>
</html>在这个示例中，.container类使用display: flex属性创建了一个Flexbox布局，justify-content: center和align-items: center属性分别在水平和垂直方向上居中了子元素。这段代码使用了Flexbox，这是一种现代的布局方式，非常适合于简单的居中任务。
推荐学习
- 《Flexbox布局基础入门》
- 《彻底理解CSS Flexbox布局》
方法2：使用绝对定位
如果你不想使用Flexbox，也可以使用绝对定位来居中元素：
<!DOCTYPE html> <!-- 定义文档类型为HTML5 -->
<html>
<head>
<meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->
<title>居中显示圆角矩形示例 | 编程狮(w3cschool.cn)</title> <!-- 页面标题 -->
<style>
/* 定义html和body的样式 */
html, body {
height: 100%; /* 设置高度为视口的100% */
margin: 0; /* 移除默认的外边距 */
}
/* 定义内容容器样式 */
.body-content {
position: relative; /* 设置定位为相对定位，用于绝对定位子元素的参考 */
height: 100%; /* 设置高度为100% */
}
/* 定义矩形样式 */
.rectangle {
position: absolute; /* 设置定位为绝对定位 */
top: 50%; /* 设置顶部距离为容器高度的50% */
left: 50%; /* 设置左边距离为容器宽度的50% */
transform: translate(-50%, -50%); /* 使用变换将矩形向上和向左移动50%，实现居中 */
width: 400px; /* 设置矩形宽度为400像素 */
height: 300px; /* 设置矩形高度为300像素 */
background-color: #4CAF50; /* 设置背景颜色为绿色 */
border: 2px solid #000; /* 设置边框为2像素的黑色实线 */
border-radius: 10px; /* 设置圆角为10像素 */
}
</style>
</head>
<body>
<div class="body-content"> <!-- 使用内容容器类 -->
<div class="rectangle"></div> <!-- 使用矩形类 -->
</div>
</body>
</html>在这个示例中，.rectangle类使用position: absolute属性相对于其最近的相对定位祖先（.body-content）进行定位，然后使用transform: translate(-50%, -50%)将其向左和向上移动50%，以实现居中。这段代码使用了绝对定位和transform属性，这是一种更传统的方法，也可以实现相同的效果。
推荐学习：
- 《CSS 入门课程》
三、提升开发效率的工具
在开发过程中，我们可以使用豆包MarsCode编程助手来提升我们的编码效率。豆包 MarsCode提供了智能补全、智能预测、智能问答等功能，帮助开发者节省时间，释放创造力。它支持超过100种编程语言，并兼容VSCode和JetBrains代码编辑器，是你编程路上的得力助手。详情见《豆包MarsCode官方使用指南》
通过这篇文章，我们不仅学习了如何使用CSS3创建圆角矩形，还了解了如何将其居中显示在页面上。希望这些知识能够帮助你在前端开发的道路上更进一步。
