如何用CSS3创建圆角矩形并居中显示?
在网页设计中,圆角矩形因其美观和现代感而被广泛使用,居中显示元素也是一个常见的需求。今天,我们将学习如何使用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创建圆角矩形,还了解了如何将其居中显示在页面上。希望这些知识能够帮助你在前端开发的道路上更进一步。
相关文章:
如何用CSS3创建圆角矩形并居中显示?
在网页设计中,圆角矩形因其美观和现代感而被广泛使用,居中显示元素也是一个常见的需求。今天,我们将学习如何使用CSS3的border-radius属性来创建圆角矩形,并将其居中显示在页面上。 如果你正在学习CSS,那么这个实例将非…...
Java 开发中的指定外部 Jar 路径详解
哈喽,各位小伙伴们,你们好呀,我是喵手。运营社区:C站/掘金/腾讯云/阿里云/华为云/51CTO;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点,并以文字的形式跟大家一起交流,互…...
python爬虫--小白篇【selenium自动爬取文件】
一、问题描述 在学习或工作中需要爬取文件资源时,由于文件数量太多,手动单个下载文件效率低,操作麻烦,采用selenium框架自动爬取文件数据是不二选择。如需要爬取下面网站中包含的全部pdf文件,并将其转为Markdown格式。…...
TI毫米波雷达原始数据解析之Lane数据交换
TI毫米波雷达原始数据解析之Lane数据交换 背景Lane 定义Lane 确认确认LVDS Lane 数量的Matlab 代码数据格式参考 背景 解析使用mmWave Studio 抓取的ADC Data Lane 定义 芯片与DCA100之间的数据使用LVDS接口传输,使用mmWave Studio 配置过程中有一个选项是LVDS L…...
overscroll-behavior-解决H5在ios上过度滚动的默认行为
1. 问题 开发H5的过程中,经常会有android和ios两边系统需要兼容的情况。在ios上一直有个问题是当H5内容触及到页面顶部或底部时,还是可以被人为的往下或往下拉动界面。当然可能有的情况是比较适用的,比如你往下拉动,然后在导航栏…...
Nacos配置中心总结
Nacos配置中心总结 Nacos配置文件的加载顺序和优先级 加载顺序 nacos作为配置中心时,需要在bootstrap.yml文件中添加nacos config相关的配置,这样系统启动时就能先去拉取nacos server上的配置了。拉取过来后会和本地配置文件进行合并。 bootstrap.ym…...
rouyi(前后端分离版本)配置
从gitee上下载,复制下载地址,到 点击Clone,下载完成, 先运行后端,在运行前端 运行后端: 1.配置数据库,在Navicat软件中,连接->mysql->名字自己起(rouyi-vue-blog),用户名roo…...
超大规模分类(一):噪声对比估计(Noise Contrastive Estimation, NCE)
NCE损失对应的论文为《A fast and simple algorithm for training neural probabilistic language models》,发表于2012年的ICML会议。 背景 在2012年,语言模型一般采用n-gram的方法,统计单词/上下文间的共现关系,比神经概率语言…...
Windows 下安装 triton 教程
目录 背景解决方法方法一:(治标不治本)方法二:(triton-windows)- 安装 MSVC 和 Windows SDK- vcredist 安装- whl 安装- 验证 背景 triton 目前官方只有Linux 版本,若未安装,则会出…...
复盘与导出工具最新版9.15重磅发布-全新UI兼容所有windows系统
在9.11版本的基础上大更新: 1.应付费用户需求修复当更换明亮风格时软件超过电脑屏幕的bug!!!!! 2.支持所有windows版本,32/64位的win xp/7/8/10/11 3.修复开盘啦涨停原因排序bug 4.全新ui风格 5提前爆料:.9.2版本的分开…...
家用电器销售系统|Java|SSM|JSP|
【技术栈】 1⃣️:架构: B/S、MVC 2⃣️:系统环境:Windowsh/Mac 3⃣️:开发环境:IDEA、JDK1.8、Maven、Mysql5.7 4⃣️:技术栈:Java、Mysql、SSM、Mybatis-Plus、JSP、jquery,html 5⃣️数据库可…...
NRF24L01模块通信实验
NRF24L01简要介绍 这里主要介绍模块的最重要的参数,废话就不多介绍了。 该模块是一款无线通信模块,一个模块即可同时具备发射和接收数据的功能,但是要想实现通信必须使用两个模块之间才能进行通信。NRF24L01模块使用的总线控制方式为SPI总…...
2024年12月CCF-GESP编程能力等级认证Scratch图形化编程三级真题解析
本文收录于《Scratch等级认证CCF-GESP图形化真题解析》专栏,专栏总目录:点这里,订阅后可阅读专栏内所有文章。 一、单选题(一共 15 个题目,每题 2 分,共 30 分) 第 1 题 2024 年 10 月 8 日,诺贝尔物理学奖“意外地”颁给了两位计算机科学家约翰霍普菲尔德(John J. …...
【MySQL系列】VARCHAR为啥一般是255
💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...
图文教程:使用PowerDesigner导出数据库表结构为Word/Html文档
1、第一种情况-无数据库表,但有数据模型 1.1 使用PowerDesigner已完成数据建模 您已经使用PowerDesigner完成数据库建模,如下图: 1.2 Report配置和导出 1、点击:Report->Reports,如下图: 2、点击&…...
Coroutine 基础五 —— Flow 之 Channel 篇
1、Channel 与 Flow 简介与对比 所有知识都可总结为一个字 —— 流。包括数据流、事件流、状态流。 开发中最常用的 StateFlow 提供状态订阅。可以将一些信息包进 StateFlow 中进行保存。比如界面上显示的字符串,或者系统级别的信息,如用户状态。装进 …...
快速掌握Elasticsearch检索之二:滚动查询(scrool)获取全量数据(golang)
Elasticsearch8.17.0在mac上的安装 Kibana8.17.0在mac上的安装 Elasticsearch检索方案之一:使用fromsize实现分页 1、滚动查询的使用场景 滚动查询区别于上一篇文章介绍的使用from、size分页检索,最大的特点是,它能够检索超过10000条外的…...
C++设计模式:状态模式(自动售货机)
什么是状态模式? 状态模式是一种行为型设计模式,它允许一个对象在其内部状态发生改变时,动态改变其行为。通过将状态相关的逻辑封装到独立的类中,状态模式能够将状态管理与行为解耦,从而让系统更加灵活和可维护。 通…...
【网络安全实验室】脚本关实战详情
难道向上攀爬的那条路,不是比站在顶峰更让人热血澎湃吗 1.key又又找不到了 点击链接,burp抓包,发送到重放模块,点击go 得到key 2.快速口算 python3脚本 得到key 3.这个题目是空的 试了一圈最后发现是 4.怎么就是不弹出key呢…...
ts总结一下
ts基础应用 /*** 泛型工具类型*/ interface IProps {id: string;title: string;children: number[]; } type omita Omit<IProps, id | title>; const omitaA: omita {children: [1] }; type picka Pick<IProps, id | title>; const pickaA: picka {id: ,title…...
【kafka】Golang实现分布式Masscan任务调度系统
要求: 输出两个程序,一个命令行程序(命令行参数用flag)和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽,然后将消息推送到kafka里面。 服务端程序: 从kafka消费者接收…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO:支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题:MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者:Yanyuan Chen, Dexuan Xu, Yu Hu…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会,其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具,对过去十年 WWDC 主题演讲内容进行了系统化分析,形成了这份…...
逻辑回归:给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告(肿瘤大小、血液指标),你需要做出一个**决定性判断**:恶性还是良性?这种“非黑即白”的抉择,正是**逻辑回归(Logistic Regression)** 的战场&a…...
Caliper 配置文件解析:config.yaml
Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...
初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中,理解API(应用程序接口)和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能,使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...
R 语言科研绘图第 55 期 --- 网络图-聚类
在发表科研论文的过程中,科研绘图是必不可少的,一张好看的图形会是文章很大的加分项。 为了便于使用,本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中,获取方式: R 语言科研绘图模板 --- sciRplothttps://mp.…...
PostgreSQL——环境搭建
一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在࿰…...
在 Spring Boot 项目里,MYSQL中json类型字段使用
前言: 因为程序特殊需求导致,需要mysql数据库存储json类型数据,因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...
