多行文本位于图像上。文本应该出现在白色背景上，就像胶带一样。文本的每一行的左侧和右侧都需要有一个小的填充。这可以通过内联文本的框阴影来实现。
div.slide {
background-color: black;
height:200px;
width:600px;
}
div.show {
position:absolute;
top:50px;
left:50px;
color:black;
width:200px;
}
h3 {
color:black;
background-color:white;
display:inline;
-moz-box-shadow: 5px 0px 0px white, -5px 0px 0px white;
-webkit-box-shadow: 5px 0px 0px white, -5px 0px 0px white;
box-shadow: 5px 0px 0px white, -5px 0px 0px white;
}
<div class="slide">
<div class="show">
<h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
</div>
</div>
不幸的是，Firefox 的结果与 Chrome 的结果不同。但我不能说 Firefox 的行为不正确。
但是如何才能实现 Firefox 的 chrome 结果呢？
火狐浏览器需要盒子装饰打破：克隆；只要改变它，你就可以开始了:)
div.slide {
background-color: black;
height:200px;
width:600px;
}
div.show {
position:absolute;
top:50px;
left:50px;
color:black;
width:200px;
}
h3 {
box-decoration-break: clone;
color:black;
background-color:white;
display:inline;
-moz-box-shadow: 5px 0px 0px white, -5px 0px 0px white;
-webkit-box-shadow: 5px 0px 0px white, -5px 0px 0px white;
box-shadow: 5px 0px 0px white, -5px 0px 0px white;
}
<div class="slide">
<div class="show">
<h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
