CSS怎么画扁圆_CSS绘制椭圆和扁圆形状技巧教程-css教程-PHP中文网

绘制扁圆和椭圆的核心是利用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怎么画扁圆_css绘制椭圆和扁圆形状技巧教程

CSS绘制扁圆和椭圆的核心技巧在于巧妙地结合

width

登录后复制

、

height

登录后复制

属性与

border-radius

登录后复制

。当一个元素的宽度和高度不相等，并且你为其设置

border-radius: 50%

登录后复制

时，它就会自然形成一个椭圆。而所谓的“扁圆”，通常指的是宽度或高度明显大于另一边的椭圆，比如一个胶囊形状，或者通过更精细的

border-radius

登录后复制

控制来实现特定弧度的形状。

解决方案

要绘制扁圆和椭圆，我们主要依赖CSS的

border-radius

登录后复制

属性。这个属性非常强大，它不仅仅能让方块变成圆角，还能将矩形变成椭圆，甚至是独特的扁圆。

1. 绘制基本椭圆： 最直接的方法就是给一个矩形元素设置

border-radius: 50%

登录后复制

。假设你有一个

div

登录后复制

：

<div class="ellipse"></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

登录后复制

的值等于元素较短边的一半。

例如，如果你想创建一个宽度是高度两倍的胶囊：

<div class="pill-shape"></div>

登录后复制

.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];

登录后复制

斜杠前的四个值是水平半径，斜杠后的四个值是垂直半径。如果只提供一个值，它会应用于所有角；如果提供两个值，第一个用于左上和右下，第二个用于右上和左下，以此类推。

万兴爱画

万兴爱画AI绘画生成工具

查看详情

举个例子：绘制一个“水滴”形状的扁圆。 这需要一些想象力，但通过控制每个角的半径，我们可以模拟出一些不规则的形状。假设我们想让底部圆润，顶部尖锐一点：

<div class="water-drop"></div>

登录后复制

.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的帮忙。

clip-path

登录后复制

属性： 这是绘制复杂形状的利器。

clip-path

登录后复制

允许你用各种图形函数（如

circle()

登录后复制

、

ellipse()

登录后复制

、

polygon()

登录后复制

、

inset()

登录后复制

）来裁剪一个元素，只显示指定形状内的部分。要绘制椭圆，

clip-path: ellipse()

登录后复制

是最直接的。

<div class="clip-ellipse"></div>

登录后复制

.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

登录后复制

无法实现的形状，比如一个不规则的星形，或者一个多边形。而且，它支持动画，能做出非常酷炫的形状变化效果。不过，兼容性方面，虽然现代浏览器支持度已经很好了，但在一些老旧浏览器上可能需要注意。

transform

登录后复制

属性配合圆形： 这个方法比较取巧，先画一个正圆，然后通过

transform: scaleX()

登录后复制

或

scaleY()

登录后复制

将其拉伸成椭圆。

<div class="transform-ellipse"></div>

登录后复制

.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 width="200" height="100">
  <ellipse cx="100" cy="50" rx="90" ry="40" fill="#f1c40f" />
</svg>

登录后复制

SVG的

<ellipse>

登录后复制

标签可以直接定义椭圆，通过

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%;
}

登录后复制

结合