当前位置：首页 > news >正文

如何用CSS3创建圆角矩形并居中显示？

news 2025/8/1 16:12:43

在网页设计中，圆角矩形因其美观和现代感而被广泛使用，居中显示元素也是一个常见的需求。今天，我们将学习如何使用CSS3的border-radius属性来创建圆角矩形，并将其居中显示在页面上。

用 CSS3 创建并居中显示圆角矩形

如果你正在学习CSS，那么这个实例将非常适合你练手。如果想要更生动的学习CSS，推荐编程狮W3Cschool的HTML + CSS 基础实战，它能让你像玩游戏一样闯关中掌握更多的多前端开发实用技巧。

👉如果你没有HTML基础请先学习《HTML入门课程(含HTML5)》

一、创建圆角矩形

CSS 圆角 border-radius属性

首先，我们来看如何创建一个圆角矩形：

.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

将矩形包裹在一个容器中，并使用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：使用绝对定位

position属性

如果你不想使用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官方使用指南》

豆包MarsCode编程助手