我试着在悬停在一个圆形 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>