内联元素的box-shadow

时间:2015-04-21 07:10:42

标签: css css3 inline box-shadow

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



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>
&#13;
&#13;
&#13;

不幸的是firefox&#39;结果与铬不一样。但我无法宣称firefox&#39;行为是不正确的。 但是如何实现firefox的chrome结果呢?

2 个答案:

答案 0 :(得分:7)

Firefox需要 box-decoration-break:clone; 只需改变它,你就可以了:)

&#13;
&#13;
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;
}
&#13;
<div class="slide">
    <div class="show">
        <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
    </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我希望这是你想要实现的目标吗?

&#13;
&#13;
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;
}
&#13;
<div class="slide">
    <div class="show">
        <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
    </div>
</div>
&#13;
&#13;
&#13;