CSS扁圆绘制技巧全解析

本文详细介绍了使用CSS绘制扁圆的多种技巧，旨在帮助开发者灵活创建各种形状。文章首先阐述了利用`border-radius`属性结合`width`和`height`实现基本椭圆和胶囊形状的方法，并深入探讨了斜杠语法的运用，以精细控制每个角的弧度，绘制更复杂的扁圆。此外，还介绍了`clip-path`属性、`transform`属性以及SVG等替代方案，用于实现更高级的形状绘制。最后，强调了响应式设计的重要性，推荐使用百分比、`vw/vh`单位结合`aspect-ratio`属性，确保扁圆在不同屏幕尺寸下保持良好的视觉效果，提升用户体验。无论你是CSS新手还是经验丰富的开发者，都能从中找到实用的技巧和灵感。

绘制扁圆和椭圆的核心是利用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：

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

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

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

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

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

2. 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的标签可以直接定义椭圆，通过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扁圆绘制技巧全解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！