如何使用CSS来实现一个带绿色小正方形填充四个角的正方形元素？

你可以使用CSS的伪元素`::before`和`::after`以及`border-radius`属性来实现在正方形元素四周添加绿色小正方形的效果。下面是一个例子：

.square {
  width: 200px; /* 正方形的宽度 */
  height: 200px; /* 正方形的高度 */
  background-color: #fff; /* 主要背景颜色 */
  position: relative;
}

.square::before,
.square::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: green; /* 小正方形的颜色 */
  border-radius: 50%; /* 边框圆角 */
}

.square::before {
  top: 0;
  left: 0;
}

.square::after {
  bottom: 0;
  right: 0;
}

在这个例子中，`.square`类定义了一个正方形，内部有两个伪元素`.square::before`和`.square::after`分别位于正方形的左上角和右下角，形成了绿色的小正方形。