我想创建这样的效果：
有没有办法通过 CSS/JS 来做到这一点？
非常感谢，我是网页设计的新手，在过去的几个小时里我一直在努力解决这个问题！
下面是一种仅使用 CSS 即可实现文本多行、填充、突出显示行为的方法。
这是基于其他地方找到的 box-shadow 方法，但是从 Firefox 32 开始，传统的 box-shadow 解决方案不再正确渲染。
回顾所做的更改，我发现添加了一个新属性：box-decoration-break，它是负责的。该属性默认为“split”，但需要指定为“clone”才能实现所需的多行填充效果。
欲了解更多信息，请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break
.box {
width: 50rem;
margin: 1rem auto;
font-family: arial, verdana;
}
h1 {
color: white;
font-size: 2.5rem;
line-height: 4rem; /* reduce size to remove gap between text */
margin: 0px;
}
h1 span {
background-color: #A8332E;
padding: 0.5rem 0;
-webkit-box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
-webkit-box-decoration-break: clone;
-ms-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}<div class="box">
<h1>
<span>Multi-line, padded, highlighted text working in latest Firefox using box-decoration-break: clone</span>
</h1>
</div>