绘制扁圆和椭圆的核心是利用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%;
在这个200×100的矩形上。但它的真正威力在于，你可以为每个角设置不同的水平和垂直半径，比如：
.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];
斜杠前的四个值是水平半径，斜杠后的四个值是垂直半径。如果只提供一个值，它会应用于所有角；如果提供两个值，第一个用于左上和右下，第二个用于右上和左下，以此类推。
LibLibAI
国内领先的AI创意平台，以海量模型、低门槛操作与“创作-分享-商业化”生态，让小白与专业创作者都能高效实现图文乃至视频创意表达。
159 查看详情
举个例子：绘制一个“水滴”形状的扁圆。这需要一些想象力，但通过控制每个角的半径，我们可以模拟出一些不规则的形状。假设我们想让底部圆润，顶部尖锐一点：
.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
能让你的扁圆既能随容器缩放
以上就是CSS怎么画扁圆_CSS绘制椭圆和扁圆形状技巧教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1082912.html
微信扫一扫 
支付宝扫一扫 
