绘制扁圆和椭圆的核心是利用CSS的border-radius、clip-path、transform及SVG等技术，通过调整宽高比和半径值实现不同形状。1. 使用border-radius: 50%可将不等宽高的元素变为椭圆；2. 胶囊形状可通过border-radius设为短边一半或50%实现；3. 斜杠语法如border-radius: 100px / 50px可精细控制各角弧度；4. clip-path: ellipse()支持更灵活的椭圆裁剪；5. transform可拉伸正圆成椭圆；6. SVG提供高精度矢量椭圆；7. 响应式设计推荐使用百分比、vw/vh单位结合aspect-ratio属性保持宽高比。
CSS绘制扁圆和椭圆的核心技巧在于巧妙地结合
width、
height属性与
border-radius。当一个元素的宽度和高度不相等，并且你为其设置
border-radius: 50%时，它就会自然形成一个椭圆。而所谓的“扁圆”，通常指的是宽度或高度明显大于另一边的椭圆，比如一个胶囊形状，或者通过更精细的
border-radius控制来实现特定弧度的形状。
解决方案
要绘制扁圆和椭圆，我们主要依赖CSS的
border-radius属性。这个属性非常强大，它不仅仅能让方块变成圆角，还能将矩形变成椭圆，甚至是独特的扁圆。
1. 绘制基本椭圆： 最直接的方法就是给一个矩形元素设置
border-radius: 50%。 假设你有一个
div：
对应的CSS：
.ellipse {
width: 200px; /* 宽度 */
height: 100px; /* 高度 */
background-color: #3498db; /* 填充颜色 */
border-radius: 50%; /* 关键：设置为50% */
}这里，
width和
height不等，
border-radius: 50%会根据元素的尺寸自动调整，使其边角变成最大的弧度，从而形成一个完美的椭圆。如果
width和
height相等，它就会变成一个正圆。
立即学习“前端免费学习笔记（深入）”；
2. 绘制“扁圆”（胶囊/药丸形状）： “扁圆”在很多UI设计中常指那种两端是半圆形、中间是矩形的胶囊状或药丸状。实现这种效果，我们需要确保
border-radius的值等于元素较短边的一半。
例如，如果你想创建一个宽度是高度两倍的胶囊：
.pill-shape {
width: 200px;
height: 50px; /* 高度是宽度的一半 */
background-color: #2ecc71;
border-radius: 25px; /* 关键：等于高度的一半 (50px / 2 = 25px) */
/* 也可以直接写 border-radius: 50px; 达到同样效果，因为当 radius 大于高度的一半时，会自动取高度的一半 */
/* 更简洁的写法是 border-radius: 50%; 同样能实现，因为当 width > height 时，50% 会让短边完全圆弧化 */
}这里，
border-radius: 25px使得高度为50px的元素两端完全圆弧化，与中间的矩形部分结合，就形成了一个标准的胶囊形状。其实，很多时候直接用
border-radius: 50%也能达到类似效果，因为浏览器会智能地将半径限制在元素尺寸的一半以内。但明确指定像素值，有时候能更好地表达意图，尤其是在一些边缘情况下。
3. 使用border-radius
的斜杠语法绘制更复杂的扁圆：
border-radius还可以接受斜杠（
/）来分别指定水平半径和垂直半径，这为绘制更奇特的椭圆或扁圆提供了极大的灵活性。 语法是
border-radius: 水平半径 / 垂直半径;。 例如：
.custom-oval {
width: 200px;
height: 100px;
background-color: #f39c12;
border-radius: 100px / 50px; /* 水平半径100px，垂直半径50px */
}这个例子中，
border-radius: 100px / 50px;实际上等同于
border-radius: 50%;在这个200x100的矩形上。但它的真正威力在于，你可以为每个角设置不同的水平和垂直半径，比如：
.asymmetrical-oval {
width: 200px;
height: 100px;
background-color: #e74c3c;
border-top-left-radius: 100px 50px; /* 左上角水平100px，垂直50px */
border-top-right-radius: 50px 100px; /* 右上角水平50px，垂直100px */
border-bottom-right-radius: 100px 50px; /* 右下角水平100px，垂直50px */
border-bottom-left-radius: 50px 100px; /* 左下角水平50px，垂直100px */
}这能让你绘制出非常独特、非对称的扁圆或异形。我觉得这才是
border-radius真正的“黑魔法”所在，它允许你跳出常规的圆形和椭圆，去探索更多奇特的形状。
如何利用border-radius
的进阶用法，实现更复杂的扁圆或自定义弧度？
说实话，
border-radius的进阶用法，尤其是涉及到斜杠（
/）和多值语法时，初学者可能会觉得有点烧脑。它其实是把每个角的水平半径和垂直半径分开了。
我们知道
border-radius可以设置1到4个值，分别对应左上、右上、右下、左下。 比如
border-radius: 10px 20px 30px 40px;
当加入斜杠时，语法就变成了：
border-radius: [top-left-radius] [top-right-radius] [bottom-right-radius] [bottom-left-radius] / [top-left-radius] [top-right-radius] [bottom-right-radius] [bottom-left-radius];
斜杠前的四个值是水平半径，斜杠后的四个值是垂直半径。如果只提供一个值，它会应用于所有角；如果提供两个值，第一个用于左上和右下，第二个用于右上和左下，以此类推。
举个例子：绘制一个“水滴”形状的扁圆。 这需要一些想象力，但通过控制每个角的半径，我们可以模拟出一些不规则的形状。 假设我们想让底部圆润，顶部尖锐一点：
.water-drop {
width: 100px;
height: 150px;
background-color: #3498db;
/* 底部完全圆弧，顶部几乎是直角或小圆角 */
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
/* 解释：
水平半径：50% 50% 50% 50% (所有角水平半径都是50%)
垂直半径：60% (左上) 60% (右上) 40% (右下) 40% (左下)
这样，顶部两个角的垂直半径更大，配合水平半径，会让顶部显得更“收敛”或“尖”
底部两个角的垂直半径较小，会让底部显得更“饱满”
*/
/* 另一个更直观的尝试，让底部形成一个半圆，顶部收窄 */
/* border-radius: 50% 50% 50% 50% / 0 0 50% 50%; */
/* 这个会使得顶部直角，底部半圆 */
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; /* 调整后，更接近水滴 */
position: relative;
overflow: hidden; /* 防止内容溢出，如果里面有内容的话 */
}这种高级用法确实需要反复尝试和调整，才能得到理想的形状。它考验的不仅仅是CSS知识，还有一点点几何直觉。在我看来，这就像是用代码在画布上雕塑，挺有意思的。
除了border-radius
，CSS中还有其他绘制椭圆或复杂形状的替代方案吗？
当然有！虽然
border-radius在绘制基础椭圆和扁圆上非常方便，但它也有其局限性，比如无法绘制凹陷的形状，或者一些非常规的曲线。这时候，我们就需要请出其他CSS属性，甚至一些SVG的帮忙。
1. clip-path
属性：
这是绘制复杂形状的利器。
clip-path允许你用各种图形函数（如
circle()、
ellipse()、
polygon()、
inset()）来裁剪一个元素，只显示指定形状内的部分。 要绘制椭圆，
clip-path: ellipse()是最直接的。
.clip-ellipse {
width: 200px;
height: 100px;
background-color: #9b59b6;
clip-path: ellipse(50% 50% at 50% 50%); /* rx ry at cx cy */
/* 解释：
rx: 水平半径，50%表示元素宽度的一半
ry: 垂直半径，50%表示元素高度的一半
at cx cy: 椭圆中心点的位置，50% 50% 表示元素中心
*/
/* 绘制一个更扁的椭圆，比如rx是70%，ry是30% */
/* clip-path: ellipse(70% 30% at 50% 50%); */
}clip-path的优势在于，它可以绘制出
border-radius无法实现的形状，比如一个不规则的星形，或者一个多边形。而且，它支持动画，能做出非常酷炫的形状变化效果。不过，兼容性方面，虽然现代浏览器支持度已经很好了，但在一些老旧浏览器上可能需要注意。
2. transform
属性配合圆形：
这个方法比较取巧，先画一个正圆，然后通过
transform: scaleX()或
scaleY()将其拉伸成椭圆。
.transform-ellipse {
width: 100px;
height: 100px; /* 先画一个正圆 */
background-color: #1abc9c;
border-radius: 50%; /* 变成正圆 */
transform: scaleX(2); /* 水平方向拉伸2倍，变成一个扁平的椭圆 */
/* transform: scaleY(0.5); 垂直方向压缩，变成一个扁平的椭圆 */
transform-origin: center center; /* 确保从中心点拉伸 */
}这个方法的优点是简单直观，尤其适合需要动态拉伸椭圆的场景。但要注意，
transform会影响到元素内部的所有内容，如果椭圆内部有文字或图片，它们也会跟着变形。所以，通常只用于纯图形元素。
3. SVG（可伸缩矢量图形）： 如果对形状的复杂度和精确度要求极高，或者需要绘制非常规的曲线，那么SVG是你的终极武器。SVG是基于XML的矢量图形格式，可以直接嵌入到HTML中。
SVG的
标签可以直接定义椭圆，通过
cx、
cy（中心坐标）、
rx、
ry（水平和垂直半径）来精确控制。它的优势在于矢量特性，无论放大多少倍都不会失真，而且可以通过CSS进行样式化和动画。虽然它不是纯粹的CSS解决方案，但在前端开发中，SVG与CSS常常是并肩作战的。
在我看来，选择哪种方法，很大程度上取决于你的具体需求和对复杂度的接受程度。对于简单的扁圆，
border-radius足够好；需要更灵活的形状，
clip-path是首选；而对极致的图形控制，SVG是不可替代的。
如何确保绘制的扁圆在不同屏幕尺寸下保持良好的响应式表现？
光会画还不够，实际项目中总要考虑响应式不是？让扁圆在不同设备上都能看起来协调，这可不仅仅是把
width和
height换成百分比那么简单。
1. 使用相对单位： 这是最基础也是最重要的一步。避免使用固定的
px单位来定义扁圆的
width、
height和
border-radius。
-
百分比 (
%
)： 相对于父元素的尺寸。.responsive-ellipse { width: 80%; /* 占据父元素宽度的80% */ height: 40%; /* 占据父元素高度的40% */ border-radius: 50%; /* 或者如果父元素高度不确定，可以基于宽度计算高度 */ /* padding-bottom: 40%; height: 0; */ } -
视口单位 (
vw
,vh
)： 相对于视口（浏览器窗口）的宽度或高度。.responsive-pill { width: 60vw; /* 视口宽度的60% */ height: 10vw; /* 视口宽度的10% (保持宽高比) */ border-radius: 5vw; /* 高度的一半 */ background-color: #e67e22; }使用
vw
来定义height
和border-radius
，可以确保扁圆的宽高比和圆角比例在视口变化时保持一致，这是我个人非常推荐的做法，因为它能带来更稳定的视觉效果。
2. 利用 aspect-ratio
属性：
这是一个现代CSS属性，专门用来保持元素的宽高比。有了它，我们就不需要通过
padding-bottom的hack方式来维持比例了。
.aspect-ratio-ellipse {
width: 200px; /* 或百分比，或vw */
aspect-ratio: 2 / 1; /* 宽度是高度的两倍 */
background-color: #f39c12;
border-radius: 50%;
}结合
width的相对单位，
aspect-ratio能让你的扁圆既能随容器缩放
