html - 框阴影未显示在仅包含空白的跨度上

Question

我正在尝试用背景色装饰文本，所以我用背景色将它包裹在 span 中。跨度也可能有边框颜色，如果它们有侧边框，则它有圆 Angular 。

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

该解决方案几乎适用于所有情况。但是，如果左侧的 span 仅包含空白，则它的 box-shadow 似乎未显示。这似乎不是浏览器错误，因为它可以在 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;
}

这是一个 fiddle ，您可以在其中看到 box-shadow 出现和不出现的情况:

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

Answer 1

我在 Chrome 中试过你的 fiddle ，但阴影对这两个例子都不起作用。您的 box-shadow 属性的符号似乎是问题所在。

box-shadow: 0 0 8px #ddd;

这种样式符号应该有效。