内联元素的box-shadow

Question

多行文字位于图像上.文本应该出现在像录音的白色背景上.文本的每一行都需要左侧和右侧的小填充.这可以通过内嵌文本的框阴影来实现.

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结果呢？

Answer 1

Firefox需要box-decoration-break:clone; 只是改变它,你很高兴去:)

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>