如何为椭圆边框按钮添加仅边框内生效的hover背景效果？

解决方案 #

1. 修复椭圆按钮hover背景溢出问题

问题根源是按钮默认的box-sizing: content-box会让padding撑大元素尺寸，导致border-radius的裁剪范围和视觉边框不匹配。只需添加box-sizing: border-box让宽高包含padding和边框，同时简化hover样式：

<li className="headerRightLink">
   <button className="tryQuoraButton">Try Quora+</button>
</li>

.headerRightLink {
 display: flex;
 align-items: center;
 justify-content: space-between;
 font-size: 30px;
 cursor: pointer;
}
.headerRightLink:hover {
 background-color: rgb(241, 238, 238);
}

.tryQuoraButton {
 box-sizing: border-box; /* 核心：让宽高包含padding和边框 */
 padding: 5px;
 width: 90px;
 height: 30px;
 text-align: center;
 background-color: white;
 border: 0.5px solid rgb(226, 217, 217);
 border-radius: 40px/35px; /* 统一椭圆圆角，无需前缀 */
 font-size: 12px;
 font-weight: 700;
 color: gray;
} 
.tryQuoraButton:hover {
 background-color: rgb(241, 238, 238);
 /* 无需重复设置border-radius，继承基类样式即可 */
}

2. 设置图片为圆形

给图片添加自定义类，通过border-radius: 50%实现圆形，配合object-fit: cover保证图片不变形：

<img src="https://i.sstatic.net/gsv2u.png" alt="描述文本" class="circular-img" />

.circular-img {
 width: 50px; /* 按需设置尺寸 */
 height: 50px; /* 宽高必须一致才能是正圆形 */
 border-radius: 50%;
 object-fit: cover; /* 裁剪图片多余部分，保持比例 */
}

内容的提问来源于stack exchange，提问作者Shiv Shankar Prasad