框阴影为内联元素 [英] box-shadow for inline element
问题描述
多行文本位于图像上。文本应该出现在白色背景上,如录音。文本的每一行在左侧和右侧需要一个小填充。这可以通过内联文本的框阴影来实现。
A multiline text is positioned on an image. The text should appear on a white background like taped. Each line of the text needs a small padding at the left and right side. This can be achieved with a box-shadow for the inline text.
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>
Unfortunatelly firefox'结果不同于chrome。但我不能说firefox的行为是不正确的。
但是如何实现firefox的chrome结果呢?
Unfortunatelly firefox' result is not the same as of chrome. But I couldn't claim that firefox' behaviour isn't correct. But how can I achieve the chrome result for firefox?
推荐答案
Firefox需要 box-decoration-break :clone; 只是改变了,你很好去:)
Firefox requires box-decoration-break: clone; just change that and you are good to go :)
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>
这篇关于框阴影为内联元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!