箱子的影子没有出现在只包含空白的范围内

我想用背景颜色来装饰文本，所以我用背景颜色将它包裹在跨度中。跨度也可以具有边框颜色，并且如果它们具有侧边，则它具有圆角。箱子的影子没有出现在只包含空白的范围内

当相邻跨度具有不同的边框颜色但具有相同的背景颜色，并且右边的跨度具有舍入的左边框时，我遇到了问题。在这种情况下，背景颜色看起来并不连续（因为边框是圆形的），所以我试图通过在左边的跨度上应用方块阴影来伪装它。

该解决方案几乎适用于所有情况。但是，如果左侧的跨度仅包含空白区域，则看起来像是未显示其阴影框。这似乎不是浏览器的问题，因为它可以在Chrome，Safari和Firefox中重现。

下面是HTML我想要的风格：

<div> 
    hello<span class="left"> </span><span class="right"><span>world<span></span> 
</div>

下面是相关的CSS：

div { 
    white-space: pre-wrap; 
} 

.left { 
    border-style: solid; 
    border-width: 1px 0; 
    border-color: blue; 
    box-shadow: 8px 0 #ddd; 
    background-color: #ddd; 
} 

.right { 
    border-style: solid; 
    border-top-left-radius: 6px; 
    border-bottom-left-radius: 6px; 
    border-color: green; 
    border-width: 1px 0 1px 1px; 
    background-color: #ddd; 
} 

.right > span { 
    margin-right: -1px; 
}

这里有一个小提琴在这里你可以看到的情况下的box-shadow呢并没有显示出来：

https://jsfiddle.net/fraziermork/jnnjq36b/1/

来源

2017-08-17 fmork

好的，我现在看到了这个问题。您指的是通过圆角流血的伪背景。覆盖字形的背景由background-color属性渲染。 – BoltClock

在左右跨度之间插入一个换行符表明，正在渲染盒形阴影，并且它与左跨度框之间存在间隙。我迷失了方向。 – BoltClock

哦，我没有注意到这一点。这太奇怪了。 – fmork

我试着在你的章提琴罗马和投影都不适用于这两种示例。你的box-shadow属性的符号似乎是问题所在。

box-shadow: 0 0 8px #ddd;

此风格符号应该工作。

来源

2017-08-17 16:54:31

-moz-box-shadow现在还没有工作或-webkit-box-shadow需要几年。我很惊讶指定前缀适合你。 – BoltClock

这很有趣。我使用的是版本60.0.3112.90（官方版本）（64位）的Chrome和-webkit-box-shadow：0 0 8px 0 black;绝对似乎工作。 –

这不是前缀，它是符号！由于某些原因'box-shadow：8px 0 #ddd;'没有应用，而其他符号工作：https://jsfiddle.net/jnnjq36b/3/ – Christoph

箱子的影子没有出现在只包含空白的范围内

回答

相关问题