如何为HTML的p元素创建背景变色的椭圆形悬停效果

要实现悬停时的椭圆背景，核心是调整border-radius的取值，同时配合内边距让效果更合理：

• 把你当前用的border-radius: 10px替换成border-radius: 50%。固定像素值的圆角只能让边角圆滑，而百分比值会基于元素自身的宽高比例生成圆角，当元素宽高不等时就会形成椭圆。
• 给元素添加合适的内边距，避免文本紧贴椭圆边缘，提升视觉体验。
• 用:hover伪类触发背景色变化和椭圆样式，再加上过渡动画让效果更流畅。

完整示例代码 #

HTML

<p class="ellipse-hover">这是一段带悬停椭圆效果的文本</p>

CSS

.ellipse-hover {
  padding: 6px 18px; /* 上下内边距小于左右，适配椭圆的横向拉伸感 */
  border: 1px solid transparent;
  transition: background-color 0.3s, border-radius 0.3s; /* 平滑过渡状态变化 */
}

.ellipse-hover:hover {
  background-color: #cce7ff; /* 自定义悬停背景色，可根据需求修改 */
  border-radius: 50%; /* 关键：生成椭圆背景 */
}

补充说明 #

如果需要更精细的椭圆控制，可以使用border-radius的复合写法，比如border-radius: 50% / 40%，前者对应水平方向的圆角半径，后者对应垂直方向，能调整椭圆的扁圆程度。不过一般情况下50%就足以实现标准的椭圆效果。

内容的提问来源于stack exchange，提问作者Mickey Vershbow