css3图形制作代码阴阳图

CSS3中可以使用伪元素和渐变来制作阴阳图。我们可以使用伪元素::before和::after来创建两个圆形，分别代表阴和阳。然后，使用渐变来设置圆形的背景色，使其呈现阴阳的效果。

我们需要创建一个容器元素，用来包裹阴阳图。我们可以给容器设置一个固定的宽度和高度，并将其位置居中。

.container {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 0 auto;
}

接下来，我们可以使用伪元素::before和::after来创建两个圆形。我们可以将它们设置为绝对定位，并将它们放置在容器的中心位置。我们还需要设置圆形的宽度和高度，并将其设置为圆形。

.container::before,
.container::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

现在，我们可以为阴和阳分别设置不同的背景色。我们可以使用渐变来实现这一效果。在阴的圆形中，我们可以使用线性渐变，从黑色过渡到灰色。在阳的圆形中，我们可以使用线性渐变，从白色过渡到灰色。

.container::before {
  background: linear-gradient(180deg, black, gray);
}
.container::after {
  background: linear-gradient(0deg, white, gray);
}

我们可以在容器中添加一些文字，来表示阴阳的含义。我们可以通过设置文字的样式来美化文字。

.container span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

这样，我们就成功地创建了一个阴阳图。通过使用伪元素和渐变，我们可以轻松地制作出各种形状和效果的图形。CSS3的强大功能为网页设计师提供了更多的创作空间，可以让网页更加丰富多样。

总结一下，制作阴阳图的关键步骤包括创建容器元素、使用伪元素创建圆形、设置渐变背景色以及添加文字样式。通过结合伪元素和渐变，我们可以轻松地制作出各种形状和效果的图形。我们也可以通过调整容器的宽度和高度、圆形的大小以及渐变的角度和颜色来实现更多的变化。