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

在网页设计中，圆角矩形因其美观和现代感而被广泛使用，居中显示元素也是一个常见的需求。今天，我们将学习如何使用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的圆角 */
}

二、居中显示

要将圆角矩形居中显示，我们可以使用以下两种方法之一：

方法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编程助手

通过这篇文章，我们不仅学习了如何使用CSS3创建圆角矩形，还了解了如何将其居中显示在页面上。希望这些知识能够帮助你在前端开发的道路上更进一步。如果你对编程感兴趣，不妨访问编程狮W3Cschool，开始你的编程学习之旅。