如何仅用CSS实现跨多行的大椭圆覆盖效果？

当然可以只用CSS实现！你遇到的问题主要是因为内联元素默认的装饰行为会在换行时截断，再加上原来的类名不匹配（HTML里用的是oval，但CSS写的是cover-circle），导致样式没正确生效。下面是具体的解决步骤和代码：

第一步：统一类名并调整核心样式 #

先把HTML和CSS的类名对齐，再通过几个关键属性实现跨多行的椭圆背景：

HTML 代码：

Hello world, <br> it's time to <br> have a <span class="oval">...break...</span>

CSS 代码：

.oval {
  /* 保持内联特性，跟随文本自动换行 */
  display: inline;
  /* 控制椭圆大小和文本间距，可根据需求调整数值 */
  padding: 0.6em 1.5em;
  /* 调整行高，确保椭圆能覆盖多行文本的垂直区域 */
  line-height: 2;
  /* 创建椭圆：水平半径50%，垂直半径100%，实现横向扁椭圆效果 */
  border-radius: 50% / 100%;
  /* 自定义背景色 */
  background-color: #92efe6;
  /* 核心属性：让背景/边框在换行时保持连续视觉效果 */
  box-decoration-break: clone;
  /* 兼容webkit内核浏览器（Chrome、Safari等） */
  -webkit-box-decoration-break: clone;
}

关键属性拆解 #

• display: inline：让元素保持内联状态，文本换行时元素也会跟着换行，不会变成块级元素独占一行
• padding：直接决定椭圆的整体尺寸，上下内边距控制椭圆高度，左右内边距控制宽度，同时也能拉开文本和椭圆边缘的距离
• line-height：调整行与行的垂直间距，确保椭圆背景能完全覆盖多行文本区域，避免出现行间隙露出空白
• border-radius: 50% / 100%：椭圆的核心写法，/前是水平方向圆角半径，/后是垂直方向半径；如果想要纵向椭圆，可以反过来写100% / 50%
• box-decoration-break: clone：解决换行截断问题的关键！它会让内联元素的背景、边框等装饰在换行时，每一行都应用完整样式，视觉上就像椭圆跨了多行，而不是被拆成多个小椭圆

兼容性说明 #

box-decoration-break在现代主流浏览器（Chrome、Firefox、Edge）都能正常工作，webkit内核浏览器需要加上-webkit-前缀做兼容，基本能覆盖绝大多数使用场景。

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