如何在悬停时创建圆形背景？

Question

我尝试在悬停时使用以下圆角边框：

.memberInfo .TagList .Interests:hover {
    background-color: #dfe7f5;
    color: #206CC3;
    border-radius: 10px 0px 10px 0px;
}

我对上面的代码感到很奇怪。

我该如何制作这样的边框？

Answer 1

只需使用单值语法即可。例如：border-radius: 5px，因此5px的半径将应用于所有角落。

四值语法代表top-left top-right bottom-right bottom-left。

因此，考虑到border-radius: 10px 0px 10px 0px;，右上角和左下角不会四舍五入。