CSS圆形怎么画_CSS绘制圆形与椭圆形状方法教程

答案：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吧。每种工具都有其存在的价值，关键在于理解它们的特性，并在合适的场景下做出最明智的选择。