[css] 使用css画一个足球

"# 使用 CSS 画一个足球

<div class=\"soccer-ball\"></div>

.soccer-ball {
  width: 200px;
  height: 200px;
  background-color: white;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

.soccer-ball:before,
.soccer-ball:after {
  content: \"\";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: black;
}

.soccer-ball:before {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.soccer-ball:after {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

以上代码使用 CSS 画出了一个简单的足球效果。通过设置一个 div 元素，并给它添加了一个类名 soccer-ball。然后使用 CSS 的属性来控制其样式。

首先设置 div 的宽度和高度为 200px，这样就定义了足球的尺寸。然后通过 border-radius: 50% 设置边框的圆角，使其呈现圆形。

接下来使用伪元素 ::before 和 ::after 来画出足球的图案。这两个伪元素都使用绝对定位，并通过 top: 50%; 和 left: 50%; 将它们定位到 div 的中心。

对于 ::before 伪元素，设置宽度和高度为 50px，并设置 border-radius: 50%; 来画出一个小圆点，表示足球的一个六边形图案。

而对于 ::after 伪元素，设置宽度和高度为 200px，并设置 border-radius: 50%; 来画出一个大圆，表示足球的背景。通过 transform: translate(-50%, -50%) rotate(45deg); 实现将大圆旋转45度，形成足球的图案效果。

最终，我们就通过 CSS 成功画出了一个足球效果。可以根据需要调整尺寸和颜色，实现不同样式的足球。"