答案：CSS中通过border-radius: 50%将正方形元素变为圆形，矩形元素变为椭圆，因水平和垂直圆角半径分别为宽高的一半，形成闭合曲线。
要在CSS里画圆形或椭圆，最直接也最常用的方法就是利用
border-radius
属性。你先给一个HTML元素（比如一个
div
）设定好
width
和
height
，然后通过调整
border-radius
的值来把它的直角变成圆角。如果
width
和
height
相等，并且
border-radius
设置为
50%
，你就能得到一个完美的圆形。如果
width
和
height
不等，同样设置
border-radius: 50%
，结果就是椭圆。核心思想就是，从一个矩形（或正方形）出发，用
border-radius
把它的“棱角”打磨掉。
解决方案
说实话，每次提到CSS画圆，我第一个想到的就是
border-radius
。它简单、直接，兼容性也非常好。
绘制圆形：
要画一个完美的圆形，你需要两个条件：
立即学习“前端免费学习笔记（深入）”；
元素的
width
和
height
必须相等，也就是它得是个正方形。
border-radius
属性值设为
50%
。
举个例子：
.circle { width: 100px; height: 100px; /* 宽高相等，确保是正方形 */ background-color: #3498db; /* 给个背景色方便看 */ border-radius: 50%; /* 关键一步，让它变成圆形 */}
这样，你就会得到一个直径为100px的蓝色圆形。这个
50%
的意思，是相对于元素自身的宽度和高度的50%。当宽度和高度相等时，水平和垂直方向的圆角半径都是元素边长的一半，自然就形成了一个圆。
绘制椭圆：
画椭圆其实和画圆形差不多，唯一的区别就是元素不再是正方形，而是矩形。
元素的
width
和
height
不相等。
border-radius
属性值依然设为
50%
。
看这个例子：
.ellipse { width: 150px; /* 宽度 */ height: 80px; /* 高度，不等于宽度 */ background-color: #2ecc71; border-radius: 50%; /* 同样是50% */}
这时，
border-radius: 50%
会让水平方向的圆角半径是
width
的一半，垂直方向的圆角半径是
height
的一半。因为
width
和
height
不等，所以形成的自然就是一个椭圆。
当然，
border-radius
还有更灵活的写法，比如
border-radius: 10px / 20px;
这种，它允许你为水平和垂直方向的圆角半径设置不同的值。但对于简单的圆形和椭圆，
50%
的写法是最简洁明了的。
CSS中，
border-radius: 50%
是如何让一个元素变成圆形的？
这个问题其实挺有意思的，它涉及到
border-radius
百分比值的工作原理。当我们给
border-radius
设置一个百分比值时，这个百分比是相对于元素的尺寸来计算的。具体来说，对于水平方向的圆角半径，它参照的是元素的
width
；对于垂直方向的圆角半径，它参照的是元素的
height
。
所以，当你写下
border-radius: 50%;
的时候，实际上是告诉浏览器：
每个角的水平圆角半径是其所在元素
width
的
50%
。每个角的垂直圆角半径是其所在元素
height
的
50%
。
现在，我们考虑一个正方形元素，比如
width: 100px; height: 100px;
。
它的水平圆角半径会是
100px * 50% = 50px
。它的垂直圆角半径会是
100px * 50% = 50px
。
这意味着，每个角的圆弧都会以
50px
为半径，从元素的边缘向内弯曲。当所有四个角的圆角半径都等于元素边长的一半时，这些圆弧自然就会在中心处完美地衔接起来，形成一个完整的圆形。如果任何一个方向的半径小于边长的一半，那它就只是一个圆角矩形；如果半径超过一半，那它依然会表现为半径为边长一半的圆角。所以，
50%
是一个临界值，也是最完美的圆形实现方式。
如果是矩形，比如
width: 150px; height: 80px;
：
水平圆角半径是
150px * 50% = 75px
。垂直圆角半径是
80px * 50% = 40px
。
由于水平和垂直方向的半径不相等，形成的自然就是椭圆了。这个机制理解起来不复杂，但它正是
border-radius
能够如此灵活地绘制各种圆角形状的关键。
除了基本的圆形，CSS还能绘制出哪些不规则的圆角形状？
border-radius
的强大之处远不止画圆和椭圆那么简单。它允许你对元素的四个角进行独立控制，甚至可以为每个角的水平和垂直半径设置不同的值，这就能创造出非常多样的不规则圆角形状。我个人觉得，这才是
border-radius
真正有趣的地方。
1. 单独控制每个角的圆角：
border-radius
可以接受1到4个值，分别对应左上、右上、右下、左下四个角。
border-radius: 10px;
：所有四个角都是10px的圆角。
border-radius: 10px 20px;
：左上和右下是10px，右上和左下是20px。
border-radius: 10px 20px 30px;
：左上10px，右上和左下20px，右下30px。
border-radius: 10px 20px 30px 40px;
：左上10px，右上20px，右下30px，左下40px。
通过这种方式，你可以轻松做出类似“药丸”形状（两个相对的角完全圆滑，另外两个保持直角），或者其他不对称的圆角。
.asymmetrical-round { width: 150px; height: 100px; background-color: #f39c12; border-radius: 30px 0 50px 10px; /* 左上30px, 右上0, 右下50px, 左下10px */}
2. 使用斜杠（
/
）语法，独立设置水平和垂直半径：
LibLibAI
国内领先的AI创意平台，以海量模型、低门槛操作与“创作-分享-商业化”生态，让小白与专业创作者都能高效实现图文乃至视频创意表达。
159 查看详情 
这是
border-radius
更高级的用法，格式是
border-radius: [水平半径值] / [垂直半径值];
。你可以为每个角提供水平和垂直方向的半径。
例如：
border-radius: 50% / 10%;
：所有角的水平半径是宽度的50%，垂直半径是高度的10%。这会创建一个非常扁平的椭圆。
border-radius: 10px 20px 30px 40px / 5px 15px 25px 35px;
：这简直是艺术了，每个角的水平和垂直半径都独立设置，可以创造出非常独特的、不规则的“blob”形状。
.blob-shape { width: 200px; height: 120px; background-color: #9b59b6; border-radius: 60% 40% 70% 30% / 30% 60% 40% 70%; /* 这就能画出各种不规则的“水滴”或“云朵”状 */}
这种斜杠语法特别适合需要更精细控制圆角曲率的场景，比如模拟一些有机形状或者UI中特殊的按钮样式。通过组合不同的百分比值，你几乎可以绘制出任何你想要的圆角边缘。我个人在设计一些卡片或按钮时，就喜欢用这种方式来打破常规的矩形，让界面看起来更活泼。
在CSS中，除了
border-radius
，还有哪些方法可以实现类似圆形或椭圆的效果，它们各有什么优缺点？
虽然
border-radius
是画圆形和椭圆的“主力军”，但CSS世界里，实现类似效果的手段可不止一种。每种方法都有它的适用场景和一些需要注意的地方。
1.
clip-path
属性：
clip-path
允许你裁剪一个元素，使其只显示指定形状内的部分。它功能非常强大，可以创建圆形、椭圆、多边形等各种形状。
实现方式：
圆形：
clip-path: circle(50% at 50% 50%);
(半径50%，中心在元素中央)椭圆：
clip-path: ellipse(60px 40px at 50% 50%);
(水平半径60px，垂直半径40px，中心在元素中央)
优点：
灵活性高： 不仅限于矩形，可以对任何形状的元素进行裁剪。动画友好：
clip-path
的形状参数是可以动画的，可以做出很酷的形状变化效果。内容不失真： 裁剪的是元素的可见区域，元素内部的内容（文本、图片等）不会像
transform
那样被拉伸或压缩。
缺点：
浏览器兼容性： 相比
border-radius
，
clip-path
的兼容性稍晚一些，但现代浏览器支持度已经很好了。学习曲线： 语法比
border-radius
稍微复杂一点，特别是多边形和路径的写法。边缘抗锯齿： 有时候边缘可能会出现轻微的锯齿感，需要注意。
2.
transform
属性（结合
scale
）：
这种方法通常是先创建一个圆形（用
border-radius: 50%
），然后通过
transform: scaleX()
或
scaleY()
来拉伸或压缩它，从而变成椭圆。
实现方式：
.transformed-ellipse { width: 100px; height: 100px; /* 先是正方形 */ background-color: #e74c3c; border-radius: 50%; /* 变成圆形 */ transform: scaleX(1.5); /* 水平方向拉伸1.5倍，变成椭圆 */}
优点：
动画效果：
transform
属性也是动画的常客，非常适合做动态效果。性能较好：
transform
通常由GPU加速，性能表现不错。
缺点：
内容失真： 如果元素内部有内容，它们也会跟着一起被拉伸或压缩，这通常不是我们想要的效果。不直观： 从圆形出发再拉伸，不如直接定义椭圆形状来得直观。布局影响：
transform
不会影响元素的布局空间，可能会导致与周围元素重叠。
3. SVG (Scalable Vector Graphics)：
对于更复杂或需要极高精度的圆形和椭圆，SVG无疑是最佳选择。你可以直接在HTML中嵌入SVG代码。
实现方式：
优点：
无限缩放不失真： 矢量图的本质，无论放大多少倍都保持清晰。精度高： 可以精确控制每个点的坐标。动画和交互性强： SVG元素可以被CSS和JavaScript操作，实现复杂的动画和交互。
缺点：
代码量： 相比简单的CSS，SVG的代码量通常更大一些。学习成本： 需要了解SVG的基本语法。并非所有场景都适用： 如果只是给一个普通
div
加个圆角，用SVG就有点“杀鸡用牛刀”了。
总结一下我的看法：
对于绝大多数简单的圆形和椭圆需求，
border-radius
依然是首选，它足够简单、兼容性好，而且性能也ok。如果你需要更复杂的裁剪形状，或者希望形状能动态变化，
clip-path
会是更好的选择。而当对精度、可缩放性有极高要求，或者需要绘制非常复杂的图形时，那就果断拥抱SVG吧。每种工具都有其存在的价值，关键在于理解它们的特性，并在合适的场景下做出最明智的选择。
以上就是CSS圆形怎么画_CSS绘制圆形与椭圆形状方法教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1084968.html
微信扫一扫 
支付宝扫一扫 
