答案：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. 使用斜杠（/
）语法，独立设置水平和垂直半径：
这是
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吧。每种工具都有其存在的价值，关键在于理解它们的特性，并在合适的场景下做出最明智的选择。
