css3如何画弧

CSS3可以很方便地画出各种漂亮的图形，这里我们来看看如何使用CSS3画弧。

在CSS3中，我们可以使用border-radius属性画圆形，也可以借助transform:rotate属性画出圆弧。具体来说，画圆弧需要以下几个步骤：

/* 1. 定义元素大小和边框样式 */
circle {
  width: 100px;
  height: 100px;
  border: 2px dashed #f00;
  border-radius: 50%;
  transform-origin: center center;
}

/* 2. 通过transform:rotate转动元素 */
circle.quarter {
  transform: rotate(45deg);
}

/* 3. 利用伪元素定位半圆 */
circle.half {
  position: relative;
}

circle.half::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 0 0;
  background-color: #00f;
  transform-origin: top center;
  transform: rotate(-135deg);
}

circle.half::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #f00;
  transform: translate(-50%,-50%);
}

以上代码中，我们定义了一个circle元素，并设置了它的大小和边框样式。用border-radius设置50%可以让正方形元素变为圆形元素。同时，为了让元素绕中心旋转，我们使用了transform-origin属性。接下来，我们就可以通过transform:rotate来实现圆弧的绘制了。

如果我们需要画出半圆，可以添加一个伪元素来实现。伪元素分别占据了圆的上半部分和下半部分，通过对border-radius的设置，可以画出一个半圆。其中，transform-origin属性用于调整旋转的轴心，transform:rotate用于旋转伪元素，从而实现弧形的绘制。