悬停时CSS圆形div填充

Question

我试图在将鼠标悬停在圆形 div 上时产生一点效果，但我找不到如何使填充也变成圆形。

如您所见，填充物是方形的，我希望它的形状是我的 div(在本例中是圆形)在 CSS 中有解决方案吗？

.circle {
  height: 50px;
  width: 50px;
  margin: 35px;
  border: 3px solid blue;
  background-image: linear-gradient(blue, blue);
  background-repeat: no-repeat;
  transition: background-size .5s, color .5s;
  background-size: 0 0;
  background-position: 50% 50%;
  border-radius: 30px;
}

.circle:hover {
  background-size: 100% 100%;
  color: blue;
}

<div class="circle"></div>

Answer 1

您可以使用 radial-gradient或 box-shadow

• 盒子阴影

.circle {
  height: 50px;
  width: 50px;
  margin: 35px;
  border: 3px solid blue;
  background: blue;
  transition: box-shadow .5s, color .5s;
  background-size: 0 0;
  background-position: 50% 50%;
  border-radius: 30px;
  box-shadow: inset 0 0 0 50px white
}

.circle:hover {
  box-shadow: inset 0 0 0 0px white;
  color: blue;
}

<div class="circle">
</div>

• 径向渐变

.circle {
        height: 50px;
        width: 50px;
        margin: 35px;
        border: 3px solid blue;
        background-image: radial-gradient(circle at center , blue 50%, transparent 50%);
        background-repeat: no-repeat;
        transition: background-size .5s, color .5s;
        background-size: 0 0;
        background-position: 50% 50%;
        border-radius: 30px;

    }

.circle:hover {
    background-size: 200% 200%;
    color: blue;
}

<div class="circle">
</div>