用css 画一个车辆

首先，我们需要确定车辆的形状和颜色。假设我们要画一辆红色的小汽车。

接下来，我们可以使用 CSS 绘制车辆的形状。为了简单起见，我们将使用矩形和圆形元素来构建车身和轮子。

HTML 代码如下：

<div class="car">
  <div class="car-body"></div>
  <div class="wheel"></div>
  <div class="wheel"></div>
</div>

CSS 代码如下：

.car {
  position: relative;
  width: 150px;
  height: 80px;
  background-color: red;
  border-radius: 10px;
  overflow: hidden;
}

.car-body {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 120px;
  height: 60px;
  background-color: white;
}

.wheel {
  position: absolute;
  bottom: 0;
  width: 40px;
  height: 40px;
  background-color: black;
  border-radius: 50%;
  margin: 0 10px;
}

.wheel:first-child {
  left: 20px;
}

.wheel:last-child {
  right: 20px;
}

解释一下上述代码：

- 首先，我们创建一个 `.car` 的容器来包含整个车辆。
- 然后，我们设置 `.car` 的宽度、高度、背景颜色和边框半径。
- 为了使车身在容器内居中，我们将 `.car-body` 定位为绝对位置，并设置左上角的偏移量。
- 接下来，我们使用 `.wheel` 类来创建车轮。我们将它们定位在车辆底部，在左右两边各留出一些间隔。
- 最后，我们设置车轮的宽度、高度、背景颜色和边框半径。

现在，我们已经成功绘制了一辆简单的小汽车。你可以根据需要更改颜色和尺寸，以便适应你的设计。