创建圆形需元素为正方形且border-radius设为50%；创建椭圆则元素为长方形并同样设置border-radius:50%，百分比分别基于宽高计算，形成闭合曲线。
要通过 CSS 的 border-radius 制作圆形和椭圆，关键在于设置元素的边框圆角值，使其四个角的弧度足够大，从而形成闭合的圆或椭圆。前提是元素必须是正方形或长方形，并且有明确的宽度和高度。
要创建一个圆形，需要满足两个条件：
<div style="width: 100px; height: 100px; background-color: #3498db; border-radius: 50%;"></div>
上面的 div 宽高都是 100px，border-radius: 50% 相当于 50px，刚好让四个角的圆角连接成一个完整的圆。
要创建一个椭圆，方法类似：
立即学习“前端免费学习笔记（深入）”；
<div style="width: 150px; height: 100px; background-color: #e74c3c; border-radius: 50%;"></div>
由于宽高不同，50% 分别对应水平和垂直方向的一半尺寸，最终形成一个横向或纵向的椭圆。
border-radius: 50% 是实现圆形和椭圆最常用的方式。百分比是相对于元素的宽度和高度分别计算的：
因此，即使你使用不同的百分比组合（如 border-radius: 50% / 50%），只要两个方向都是 50%，就能得到圆或椭圆。
基本上就这些。只要掌握好尺寸和百分比的关系，用 border-radius 制作圆形和椭圆非常简单，无需图片或复杂图形技术。
以上就是如何通过css border-radius制作圆形和椭圆的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
496
收藏
