Question

我正在尝试用背景颜色装饰文字，所以我用背景颜色包裹它。跨度也可以具有边框颜色，如果它们具有侧边，则它具有圆角。

当相邻的跨距具有不同的边框颜色但背景颜色相同时，我遇到了问题，而右侧的跨度则使左边框呈圆角。在这种情况下，背景颜色看起来不连续（因为边框是圆角的），所以我试图通过在左边的跨度上应用框阴影来伪造它。

该解决方案几乎适用于所有情况。但是，如果左侧的跨度仅包含空格，则看起来它的框阴影不会显示。这似乎不是浏览器错误，因为它可以在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;
}

这里有一个小提琴，你可以看到盒子阴影没有出现的情况：

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

Answer 1

我在Chrome中尝试过你的小提琴，并且投影并不适用于任何一个例子。你的box-shadow属性的表示法似乎是个问题。

box-shadow: 0 0 8px #ddd;

此样式表示法应该有效。

框阴影不显示在仅包含空格的范围

1 个答案: