CSS圆形怎么画_CSS绘制圆形与椭圆形状方法教程-css教程-PHP中文网

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

css圆形怎么画_css绘制圆形与椭圆形状方法教程

要在CSS里画圆形或椭圆，最直接也最常用的方法就是利用

border-radius

登录后复制

属性。你先给一个HTML元素（比如一个

div

登录后复制

）设定好

width

登录后复制

和

height

登录后复制

，然后通过调整

border-radius

登录后复制

的值来把它的直角变成圆角。如果

width

登录后复制

和

height

登录后复制

相等，并且

border-radius

登录后复制

设置为

50%

登录后复制

，你就能得到一个完美的圆形。如果

width

登录后复制

和

height

登录后复制

不等，同样设置

border-radius: 50%

登录后复制

，结果就是椭圆。核心思想就是，从一个矩形（或正方形）出发，用

border-radius

登录后复制

把它的“棱角”打磨掉。

解决方案

说实话，每次提到CSS画圆，我第一个想到的就是

border-radius

登录后复制

。它简单、直接，兼容性也非常好。

绘制圆形：

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

立即学习“前端免费学习笔记（深入）”；

元素的
```
width
```
登录后复制
和
```
height
```
登录后复制
必须相等，也就是它得是个正方形。
```
border-radius
```
登录后复制
属性值设为
```
50%
```
登录后复制
。

举个例子：

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

登录后复制

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

登录后复制

这样，你就会得到一个直径为100px的蓝色圆形。这个

50%

登录后复制

的意思，是相对于元素自身的宽度和高度的50%。当宽度和高度相等时，水平和垂直方向的圆角半径都是元素边长的一半，自然就形成了一个圆。

绘制椭圆：

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

元素的
```
width
```
登录后复制
和
```
height
```
登录后复制
不相等。
```
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. 使用斜杠（

登录后复制

）语法，独立设置水平和垂直半径：

360智绘

360智脑推出的AI绘画创作与分享平台

查看详情

这是

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世界里，实现类似效果的手段可不止一种。每种方法都有它的适用场景和一些需要注意的地方。

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
```
  登录后复制
  稍微复杂一点，特别是多边形和路径的写法。
- 边缘抗锯齿： 有时候边缘可能会出现轻微的锯齿感，需要注意。

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就有点“杀鸡用牛刀”了。