近几天，在利用css编辑中，发现不少边框图像要求是矩形圆角或者直接画一个圆的例子，下面和大家一起分享下对画圆的看法。
在这次的分享中，我侧重给大家看一些例子来更好的理解，
我们都明白，画圆时要用到“border-radius：”，而且在每次画圆时，我们都应该先设定一个width和height。
那么我们可以这样理解，
我们的圆是在一个矩形（正方形）中进行裁剪的，而border-radius就是我们要裁剪的尺寸。
立即学习“前端免费学习笔记（深入）”；
给大家一些图片，更好的去理解。
首先，我们设定一个width为100px，高度为100px的正方形，设置为红色背景，如下
接下来，我们在后面添加
border-radius：50px 0 0 0；效果如下：
border-radius：50px 50px 0 0；效果如下：
border-radius：50px 50px 50px 0；效果如下：
border-radius：50px 50px 50px 50px；效果如下：
通过上述一步一步添加代码，图片一步一步的改变，我理解出如下：
border-radius：0 0 0 0；
四个值中，第一个值为矩形左上角的圆形半径（1/4的圆）；
第二个值为矩形右上角的圆形半径（1/4的圆）；
第三个值为矩形右下角的圆形半径（1/4的圆）；
第四个值为矩形左下角的圆形半径（1/4的圆）；
并且，他们是在矩形的边界上进行半径取值，再确定圆心的(这就可以完成矩形圆角，通过改变半径来实现。)
以上就是我对border-radius的理解，有哪些不对的地方，欢迎大家评点。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
C++高性能并发应用_C++如何开发性能关键应用
Java AI集成Deep Java Library_Java怎么集成AI模型部署
Golang后端API开发_Golang如何高效开发后端和API
Python异步并发改进_Python异步编程有哪些新改进
C++系统编程内存管理_C++系统编程怎么与Rust竞争内存安全
Java GraalVM原生镜像构建_Java怎么用GraalVM构建高效原生镜像
Python FastAPI异步API开发_Python怎么用FastAPI构建异步API
C++现代C++20/23/26特性_现代C++有哪些新标准特性如modules和coroutines
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
224
收藏
