我一直在尋找問題的解決方案，但我還沒有找到解決方案。下面的文章有點幫助：
內嵌文本 - 帶填充的背景顏色
如果文本很長并轉到下一行，我希望在背景中使用漸變并在所有邊上相應地填充。
它應該是這樣的：
圖片
.mytext h1 {
display: inline;
padding: 5px 10px;
background: linear-gradient(#0095DB, #00509F);
color: white;
font-family: sans-serif;
font-size: 40px;
margin-bottom: 5px;
line-height: 1.6em;
}
.mytext1 h1 {
background: linear-gradient(#0095DB, #00509F);
color: white;
display:inline;
white-space:pre-wrap;
font-family: sans-serif;
font-size: 40px;
margin-bottom: 5px;
line-height: 1.6em;
padding: 5px;
padding-left:0px;
}
.mytext2 h1 {
margin-left: 16px;
background-color: #00509F;
color: #FFFFFF;
display:inline;
white-space:pre-wrap;
font-size: 40px;
line-height: 1.6em;
font-family: sans-serif;
padding: 5px;
padding-left:0px;
box-shadow: -16px 0 0 #00509F;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}<div class="mytext">
<h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</h1>
</div>
<div class="mytext1">
<h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</h1>
</div>
<div class="mytext2">
<h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</h1>
</div>PS：由于漸變，box-shadow 沒有幫助
提前致謝
uj5u.com熱心網友回復：
您已經掌握了訣竅，box-decoration-break: clone;只需將其應用于您的第一個示例
.mytext h1 {
display: inline;
padding: 5px 10px;
background: linear-gradient(130deg,#0095DB, #00509F);
color: white;
font-family: sans-serif;
font-size: 40px;
margin-bottom: 5px;
line-height: 1.6em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}<div class="mytext">
<h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</h1>
</div>uj5u.com熱心網友回復：
您必須添加90deg到 linear-gradient 并更改display: inline為display: inline-block
.mytext h1 {
display: inline-block;
padding: 5px 10px;
background: linear-gradient(90deg, #0095DB, #00509F);
color: white;
font-family: sans-serif;
font-size: 40px;
margin-bottom: 5px;
line-height: 1.6em;
}<div class="mytext">
<h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</h1>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/353278.html
上一篇：在卡片之間對齊卡片子元素
下一篇：將<br/>添加到變數中的字串