CSS绘制椭圆与边框设置方法

本文深入解析了在CSS中绘制椭圆的三种主流方法——最常用且便捷的`border-radius`（通过宽高不等配合50%或斜杠语法精确控制椭圆比例）、灵活强大的`clip-path: ellipse()`（适用于复杂裁剪与非矩形容器场景，但需额外处理边框）、以及高精度矢量化的SVG方案，并详细演示了如何为各类CSS椭圆自然添加实线/虚线边框、多层轮廓（outline）、柔焦或立体感阴影等丰富视觉效果，帮助开发者根据项目需求快速选择并实现专业级椭圆图形设计。

在CSS中设置椭圆，最直接且常用的方法是利用 border-radius 属性，配合元素的宽度（width）和高度（height）来定义其形状。通过精确控制 border-radius 的百分比值，我们可以将一个矩形或正方形元素轻松地塑造成各种比例的椭圆，同时也能灵活地为其添加边框样式。

要绘制一个CSS椭圆，核心在于 border-radius 属性。当你为一个元素设置 border-radius: 50%; 时，如果这个元素是正方形（width 等于 height），它就会变成一个圆形。但如果这个元素是矩形（width 不等于 height），它自然就会被塑造成一个椭圆。

例如，一个 width: 200px; height: 100px; 的元素，如果设置 border-radius: 50%;，它的水平半径会是 200px * 50% = 100px，垂直半径会是 100px * 50% = 50px，这样就形成了一个标准的椭圆。

.ellipse-basic {
    width: 200px;
    height: 100px; /* 宽度和高度不同是形成椭圆的关键 */
    background-color: #3498db;
    border-radius: 50%; /* 让四个角都变成圆弧，形成椭圆 */
    border: 2px solid #2980b9; /* 添加边框样式 */
}

更精细的控制，可以使用 border-radius 的斜杠语法，如 border-radius: 水平半径 / 垂直半径;。这允许你为水平和垂直方向设置不同的圆角百分比或固定值，从而创建出更多样化的椭圆形状。比如 border-radius: 60% / 30%; 会让水平方向的圆角半径占宽度的60%，垂直方向占高度的30%。

border-radius 的百分比值是如何决定椭圆形状的？

当我第一次接触 border-radius 的百分比用法时，觉得有点抽象，但一旦理解了它的工作机制，就会发现它非常强大。简单来说，border-radius 属性可以接受一到四个值，每个值代表一个角的圆角半径。当这些值是百分比时，它们是相对于元素的宽度和高度来计算的。

具体到椭圆，我们主要关注 border-radius 的两种常见用法：

1. 单个百分比值 (例如 border-radius: 50%;)： 当只给一个百分比值时，它会同时应用于所有四个角的水平和垂直半径。这个百分比是相对于元素自身的 width 和 height 来计算的。

   • 水平半径：元素的宽度 * 百分比
   • 垂直半径：元素的高度 * 百分比 如果你的元素是矩形，比如 width: 200px; height: 100px;，那么 border-radius: 50%; 意味着每个角的水平圆角半径是 200px * 50% = 100px，垂直圆角半径是 100px * 50% = 50px。这些圆角半径在四个角上相遇，自然就构成了一个完整的椭圆。这就是我们最常用的创建椭圆的方式。

2. 斜杠语法 (例如 border-radius: 水平百分比 / 垂直百分比;)： 这种语法允许你分别控制水平和垂直方向的圆角半径。

   • border-radius: 60% / 30%; 这意味着：
   • 所有角的水平圆角半径将是 元素的宽度 * 60%。
   • 所有角的垂直圆角半径将是 元素的高度 * 30%。 这种方式给予了我们更大的灵活性来微调椭圆的“胖瘦”程度。例如，如果你的元素是 width: 200px; height: 100px;：
   • border-radius: 50% / 25%; 会创建一个水平半径为 100px，垂直半径为 25px 的椭圆，看起来会比 border-radius: 50%; 更扁。
   • border-radius: 25% / 50%; 则会创建一个水平半径为 50px，垂直半径为 50px 的椭圆，但因为元素的宽度是200px，高度是100px，所以这个圆角实际上是在元素边界内，最终还是一个椭圆形状，但会显得比较“瘦长”。

理解了这些，你就可以根据设计需求，通过调整元素的 width、height 以及 border-radius 的百分比值，精确地绘制出任何比例的椭圆了。这比想象中要灵活得多，不是吗？

除了 border-radius，还有其他方法可以绘制椭圆吗？

当然有！虽然 border-radius 是最直接和常用的CSS方法，但在某些特定场景下，我们可能需要其他工具。这里我想到两种主要的替代方案，它们各有优势：

1. clip-path 属性： clip-path 是一个非常强大的CSS属性，它允许你裁剪元素的可见区域。你可以使用多种形状函数，其中就包括 ellipse()。这就像用一把剪刀，按照你定义的椭圆形状把元素“剪”出来。 clip-path: ellipse(rx ry at cx cy);

   • rx：椭圆的水平半径。
   • ry：椭圆的垂直半径。
   • cx cy：椭圆中心的X和Y坐标。这些值可以是百分比或长度单位。 使用 clip-path 的好处是，它不会影响元素的盒模型大小，只是改变了其可见部分。这意味着你可以有一个大的矩形元素，然后只显示其中的椭圆部分。这在需要复杂裁剪或动画效果时非常有用。

   .ellipse-clip-path {
       width: 200px;
       height: 100px;
       background-color: #e74c3c;
       /* 水平半径100px (50% of width), 垂直半径50px (50% of height) */
       /* 中心点在 (100px, 50px) 即元素的正中央 */
       clip-path: ellipse(50% 50% at 50% 50%);
       border: 2px solid #c0392b; /* 边框需要额外处理，或通过伪元素实现 */
       /* 注意：clip-path 不直接支持边框，边框会被裁剪掉。
          如果需要边框，通常需要结合伪元素或多个元素来实现。
          比如用一个稍大的椭圆作为背景，再用clip-path裁剪内部元素。
       */
   }

   关于 clip-path 的边框问题，这确实是个“坑”。clip-path 会裁剪掉边框，如果你需要一个带边框的椭圆，通常的做法是创建一个稍大的背景椭圆（用 border-radius 或另一个 clip-path），然后在其上方放置一个稍小的、无边框的 clip-path 椭圆。这稍微增加了复杂性，但在灵活性上，clip-path 确实更胜一筹。

2. SVG (Scalable Vector Graphics)： 虽然这不是纯粹的CSS方法，但SVG是Web上绘制图形的强大标准，而且它与CSS的结合非常紧密。SVG可以直接定义一个 元素，并用CSS来样式化它。

   .svg-ellipse {
       fill: #9b59b6; /* 填充颜色 */
       stroke: #8e44ad; /* 边框颜色 */
       stroke-width: 2px; /* 边框宽度 */
   }

   SVG的优势在于其矢量性和精确性。无论放大多少，图形都不会失真。当你需要非常精确的图形控制，或者图形本身比较复杂，需要与其他SVG元素交互时，SVG是更好的选择。而且，SVG的样式化能力与CSS几乎一致，非常方便。

总结来说，border-radius 适合快速、简单地将矩形变成椭圆；clip-path 提供了更灵活的裁剪能力，尤其适用于非矩形容器的椭圆显示；而SVG则是图形绘制的“瑞士军刀”，提供最高的精确度和可扩展性。选择哪种方法，往往取决于你的具体需求和对复杂度的接受程度。

如何为CSS绘制的椭圆添加更复杂的边框样式或阴影效果？

为CSS绘制的椭圆添加边框和阴影，这其实是CSS样式化中最基础也最灵活的部分。因为我们用 border-radius 创建的椭圆本质上还是一个HTML元素，所以所有适用于普通元素的 border 和 box-shadow 属性，都可以直接应用到它上面，而且效果会非常自然地遵循椭圆的形状。

1. 边框样式 (Border Styles)： 为椭圆添加边框，与为任何其他HTML元素添加边框的方式完全相同。你可以使用 border 简写属性，也可以分别设置 border-width、border-style 和 border-color。

   .ellipse-with-border {
       width: 250px;
       height: 120px;
       background-color: #2ecc71;
       border-radius: 50%;
       /* 简单实线边框 */
       border: 3px solid #27ae60;
   
       /* 也可以是虚线、点线等 */
       /* border: 2px dashed #1abc9c; */
   
       /* 或者更复杂的，例如只设置部分边框 */
       /* border-top: 5px double #16a085;
          border-right: 2px dotted #16a085; */
   }

   一个值得注意的点是 outline 属性。outline 与 border 类似，但它绘制在元素的边框之外，并且不占据布局空间。更重要的是，outline 也会遵循 border-radius 定义的形状。所以，如果你需要一个“第二层”边框，或者不影响元素大小的边框，outline 是个不错的选择。

   .ellipse-with-outline {
       width: 180px;
       height: 90px;
       background-color: #f1c40f;
       border-radius: 50%;
       border: 1px solid #f39c12; /* 内部边框 */
       outline: 3px dashed #e67e22; /* 外部虚线边框，也呈椭圆形 */
       outline-offset: 5px; /* 边框与外轮廓之间的距离 */
   }

2. 阴影效果 (Shadow Effects)： box-shadow 属性是为元素添加阴影的利器。它同样会智能地遵循 border-radius 定义的形状。这意味着你的椭圆会有一个漂亮的椭圆形阴影，而不是一个矩形阴影。

   box-shadow 的基本语法是：box-shadow: h-offset v-offset blur-radius spread-radius color inset;

   • h-offset：水平偏移量（正值向右，负值向左）。
   • v-offset：垂直偏移量（正值向下，负值向上）。
   • blur-radius：模糊半径（值越大越模糊）。
   • spread-radius：扩展半径（正值使阴影变大，负值使阴影变小）。
   • color：阴影颜色。
   • inset：可选，使阴影成为内阴影。

   .ellipse-with-shadow {
       width: 220px;
       height: 110px;
       background-color: #9b59b6;
       border-radius: 50%;
       border: 1px solid #8e44ad;
       /* 简单的向下偏右的模糊阴影 */
       box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
   }
   
   .ellipse-with-complex-shadow {
       width: 150px;
       height: 75px;
       background-color: #34495e;
       border-radius: 50%;
       /* 多个阴影叠加，可以创建更丰富的效果 */
       box-shadow:
           0 0 15px rgba(52, 73, 94, 0.6), /* 柔和的光晕 */
           5px 5px 0 #2c3e50, /* 底部和右侧的硬边阴影 */
           -5px -5px 0 #4a627a; /* 顶部和左侧的亮边阴影，模拟立体感 */
   }

   通过组合 border、outline 和 box-shadow，你可以为CSS绘制的椭圆创建出各种令人惊艳的视觉效果。从简单的平面设计到具有深度和立体感的UI元素，这些CSS属性提供了足够多的可能性去探索和实现。实践中，我发现多重 box-shadow 特别适合模拟发光效果或者复杂的材质纹理，只要你敢于尝试不同的参数组合。

文中关于CSS,CSS教程的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS绘制椭圆与边框设置方法》文章吧，也可关注golang学习网公众号了解相关技术文章。