CSS绘制圆形的几种方法

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《CSS画圆形方法详解》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

答案：CSS中通过border-radius: 50%将正方形元素变为圆形，矩形元素变为椭圆，因水平和垂直圆角半径分别为宽高的一半，形成闭合曲线。

要在CSS里画圆形或椭圆，最直接也最常用的方法就是利用 border-radius 属性。你先给一个HTML元素（比如一个 div）设定好 width 和 height，然后通过调整 border-radius 的值来把它的直角变成圆角。如果 width 和 height 相等，并且 border-radius 设置为 50%，你就能得到一个完美的圆形。如果 width 和 height 不等，同样设置 border-radius: 50%，结果就是椭圆。核心思想就是，从一个矩形（或正方形）出发，用 border-radius 把它的“棱角”打磨掉。

解决方案

说实话，每次提到CSS画圆，我第一个想到的就是 border-radius。它简单、直接，兼容性也非常好。

绘制圆形：

要画一个完美的圆形，你需要两个条件：

1. 元素的 width 和 height 必须相等，也就是它得是个正方形。
2. border-radius 属性值设为 50%。

举个例子：

.circle {
  width: 100px;
  height: 100px; /* 宽高相等，确保是正方形 */
  background-color: #3498db; /* 给个背景色方便看 */
  border-radius: 50%; /* 关键一步，让它变成圆形 */
}

<div class="circle"></div>

这样，你就会得到一个直径为100px的蓝色圆形。这个 50% 的意思，是相对于元素自身的宽度和高度的50%。当宽度和高度相等时，水平和垂直方向的圆角半径都是元素边长的一半，自然就形成了一个圆。

绘制椭圆：

画椭圆其实和画圆形差不多，唯一的区别就是元素不再是正方形，而是矩形。

1. 元素的 width 和 height 不相等。
2. border-radius 属性值依然设为 50%。

看这个例子：

.ellipse {
  width: 150px; /* 宽度 */
  height: 80px;  /* 高度，不等于宽度 */
  background-color: #2ecc71;
  border-radius: 50%; /* 同样是50% */
}

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

这时，border-radius: 50% 会让水平方向的圆角半径是 width 的一半，垂直方向的圆角半径是 height 的一半。因为 width 和 height 不等，所以形成的自然就是一个椭圆。

当然，border-radius 还有更灵活的写法，比如 border-radius: 10px / 20px; 这种，它允许你为水平和垂直方向的圆角半径设置不同的值。但对于简单的圆形和椭圆，50% 的写法是最简洁明了的。

CSS中，border-radius: 50% 是如何让一个元素变成圆形的？

这个问题其实挺有意思的，它涉及到 border-radius 百分比值的工作原理。当我们给 border-radius 设置一个百分比值时，这个百分比是相对于元素的尺寸来计算的。具体来说，对于水平方向的圆角半径，它参照的是元素的 width；对于垂直方向的圆角半径，它参照的是元素的 height。

所以，当你写下 border-radius: 50%; 的时候，实际上是告诉浏览器：

• 每个角的水平圆角半径是其所在元素 width 的 50%。
• 每个角的垂直圆角半径是其所在元素 height 的 50%。

现在，我们考虑一个正方形元素，比如 width: 100px; height: 100px;。

• 它的水平圆角半径会是 100px * 50% = 50px。
• 它的垂直圆角半径会是 100px * 50% = 50px。

这意味着，每个角的圆弧都会以 50px 为半径，从元素的边缘向内弯曲。当所有四个角的圆角半径都等于元素边长的一半时，这些圆弧自然就会在中心处完美地衔接起来，形成一个完整的圆形。如果任何一个方向的半径小于边长的一半，那它就只是一个圆角矩形；如果半径超过一半，那它依然会表现为半径为边长一半的圆角。所以，50% 是一个临界值，也是最完美的圆形实现方式。

如果是矩形，比如 width: 150px; height: 80px;：

• 水平圆角半径是 150px * 50% = 75px。
• 垂直圆角半径是 80px * 50% = 40px。

由于水平和垂直方向的半径不相等，形成的自然就是椭圆了。这个机制理解起来不复杂，但它正是 border-radius 能够如此灵活地绘制各种圆角形状的关键。

除了基本的圆形，CSS还能绘制出哪些不规则的圆角形状？

border-radius 的强大之处远不止画圆和椭圆那么简单。它允许你对元素的四个角进行独立控制，甚至可以为每个角的水平和垂直半径设置不同的值，这就能创造出非常多样的不规则圆角形状。我个人觉得，这才是 border-radius 真正有趣的地方。

1. 单独控制每个角的圆角：

border-radius 可以接受1到4个值，分别对应左上、右上、右下、左下四个角。

• border-radius: 10px;：所有四个角都是10px的圆角。
• border-radius: 10px 20px;：左上和右下是10px，右上和左下是20px。
• border-radius: 10px 20px 30px;：左上10px，右上和左下20px，右下30px。
• border-radius: 10px 20px 30px 40px;：左上10px，右上20px，右下30px，左下40px。

通过这种方式，你可以轻松做出类似“药丸”形状（两个相对的角完全圆滑，另外两个保持直角），或者其他不对称的圆角。

.asymmetrical-round {
  width: 150px;
  height: 100px;
  background-color: #f39c12;
  border-radius: 30px 0 50px 10px; /* 左上30px, 右上0, 右下50px, 左下10px */
}

2. 使用斜杠（/）语法，独立设置水平和垂直半径：

这是 border-radius 更高级的用法，格式是 border-radius: [水平半径值] / [垂直半径值];。你可以为每个角提供水平和垂直方向的半径。

例如：

• border-radius: 50% / 10%;：所有角的水平半径是宽度的50%，垂直半径是高度的10%。这会创建一个非常扁平的椭圆。
• border-radius: 10px 20px 30px 40px / 5px 15px 25px 35px;：这简直是艺术了，每个角的水平和垂直半径都独立设置，可以创造出非常独特的、不规则的“blob”形状。

.blob-shape {
  width: 200px;
  height: 120px;
  background-color: #9b59b6;
  border-radius: 60% 40% 70% 30% / 30% 60% 40% 70%; /* 这就能画出各种不规则的“水滴”或“云朵”状 */
}

这种斜杠语法特别适合需要更精细控制圆角曲率的场景，比如模拟一些有机形状或者UI中特殊的按钮样式。通过组合不同的百分比值，你几乎可以绘制出任何你想要的圆角边缘。我个人在设计一些卡片或按钮时，就喜欢用这种方式来打破常规的矩形，让界面看起来更活泼。

在CSS中，除了 border-radius，还有哪些方法可以实现类似圆形或椭圆的效果，它们各有什么优缺点？

虽然 border-radius 是画圆形和椭圆的“主力军”，但CSS世界里，实现类似效果的手段可不止一种。每种方法都有它的适用场景和一些需要注意的地方。

1. clip-path 属性：

clip-path 允许你裁剪一个元素，使其只显示指定形状内的部分。它功能非常强大，可以创建圆形、椭圆、多边形等各种形状。

• 实现方式：

  • 圆形： clip-path: circle(50% at 50% 50%); (半径50%，中心在元素中央)
  • 椭圆： clip-path: ellipse(60px 40px at 50% 50%); (水平半径60px，垂直半径40px，中心在元素中央)

• 优点：

  • 灵活性高： 不仅限于矩形，可以对任何形状的元素进行裁剪。
  • 动画友好： clip-path 的形状参数是可以动画的，可以做出很酷的形状变化效果。
  • 内容不失真： 裁剪的是元素的可见区域，元素内部的内容（文本、图片等）不会像 transform 那样被拉伸或压缩。

• 缺点：

  • 浏览器兼容性： 相比 border-radius，clip-path 的兼容性稍晚一些，但现代浏览器支持度已经很好了。
  • 学习曲线： 语法比 border-radius 稍微复杂一点，特别是多边形和路径的写法。
  • 边缘抗锯齿： 有时候边缘可能会出现轻微的锯齿感，需要注意。

2. transform 属性（结合 scale）：

这种方法通常是先创建一个圆形（用 border-radius: 50%），然后通过 transform: scaleX() 或 scaleY() 来拉伸或压缩它，从而变成椭圆。

• 实现方式：

  .transformed-ellipse {
    width: 100px;
    height: 100px; /* 先是正方形 */
    background-color: #e74c3c;
    border-radius: 50%; /* 变成圆形 */
    transform: scaleX(1.5); /* 水平方向拉伸1.5倍，变成椭圆 */
  }

• 优点：

  • 动画效果： transform 属性也是动画的常客，非常适合做动态效果。
  • 性能较好： transform 通常由GPU加速，性能表现不错。

• 缺点：

  • 内容失真： 如果元素内部有内容，它们也会跟着一起被拉伸或压缩，这通常不是我们想要的效果。
  • 不直观： 从圆形出发再拉伸，不如直接定义椭圆形状来得直观。
  • 布局影响： transform 不会影响元素的布局空间，可能会导致与周围元素重叠。

3. SVG (Scalable Vector Graphics)：

对于更复杂或需要极高精度的圆形和椭圆，SVG无疑是最佳选择。你可以直接在HTML中嵌入SVG代码。

• 实现方式：

  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="#f1c40f" />
  </svg>
  
  <svg width="150" height="80">
    <ellipse cx="75" cy="40" rx="70" ry="35" fill="#1abc9c" />
  </svg>

• 优点：

  • 无限缩放不失真： 矢量图的本质，无论放大多少倍都保持清晰。
  • 精度高： 可以精确控制每个点的坐标。
  • 动画和交互性强： SVG元素可以被CSS和JavaScript操作，实现复杂的动画和交互。

• 缺点：

  • 代码量： 相比简单的CSS，SVG的代码量通常更大一些。
  • 学习成本： 需要了解SVG的基本语法。
  • 并非所有场景都适用： 如果只是给一个普通 div 加个圆角，用SVG就有点“杀鸡用牛刀”了。

总结一下我的看法：

对于绝大多数简单的圆形和椭圆需求，border-radius 依然是首选，它足够简单、兼容性好，而且性能也ok。如果你需要更复杂的裁剪形状，或者希望形状能动态变化，clip-path 会是更好的选择。而当对精度、可缩放性有极高要求，或者需要绘制非常复杂的图形时，那就果断拥抱SVG吧。每种工具都有其存在的价值，关键在于理解它们的特性，并在合适的场景下做出最明智的选择。

以上就是《CSS绘制圆形的几种方法》的详细内容，更多关于CSS,圆形,border-radius,clip-path,椭圆的资料请关注golang学习网公众号！