行内元素的框阴影

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

我希望这是您想要实现的目标？

div.slide {
    background-color: black;
    height:200px;
    width:600px;
}
div.show {
    position:absolute;
    top:50px;
    left:50px;
    color:black;
    width:200px;
}
h3 {
    color:black;
    display:inline;
    
    text-shadow:
    -1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
     1px 1px 0 #fff;
}

<div class="slide">
    <div class="show">
        <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
    </div>
</div>

Answer 2

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>

行内元素的框阴影

box-shadow for inline element

css

inline

box-shadow