CSS实现鼠标悬停时背景色收缩至边框内且文字放大效果

首先先修正你代码里的两处小问题：

1. CSS中#box的black;单独一行是语法错误，应该合并到border属性声明里
2. HTML末尾多了一个多余的</div>标签，需要删除

接下来用CSS的:hover伪类就能实现你要的效果，不需要用@keyframes，具体实现如下：

修改后的完整代码 #

CSS代码 #

body {
  background-color: powderblue;
}

#box {
  border: 10px dashed black; /* 修正语法错误，合并border属性 */
  font-size: smaller;
  font-weight: bold;
  text-align: center;
  padding: 15px;
  background: orchid;
  background-clip: border-box;
  transition: all 0.3s ease; /* 添加过渡动画，让变化更平滑 */
}

/* 鼠标悬停时的样式 */
#box:hover {
  background-clip: padding-box; /* 背景收缩到边框内侧 */
  font-size: larger; /* 文字放大 */
}

HTML代码 #

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="stack_css/stack.css">
</head>
<body>
  <h1 style="text-align: center;">Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <div id="box">
    <p>Lorem Ipsum Doler Amet.</p>
  </div>
</body>
</html>

效果说明 #

• transition: all 0.3s ease：让背景和文字的变化过程更流畅，不会突兀切换
• background-clip: padding-box：这个属性会让背景只填充到内边距的边缘，也就是边框的内侧，达到你要的“收缩至边框内侧”的效果
• font-size: larger：直接修改容器的字体大小，内部的<p>会继承这个属性，实现文字放大

如果想要更精细的控制，比如只让内部文字变化，也可以给#box p单独加hover样式：

#box:hover p {
  font-size: larger;
}

内容的提问来源于stack exchange，提问作者Canva A.I Assisstant 32