如何将框阴影应用到带有轮廓的文本外部？答案

【问题标题】：How to apply a box-shadow to the outside of text with an outline?如何将框阴影应用到带有轮廓的文本外部？
【发布时间】：2017-04-17 18:33:27
【问题描述】：

我有一段以我想要的方式概述的文本。现在我想要围绕该轮廓的阴影效果。当我应用盒子阴影时，它会影响我不想要的线条。有什么方法只适用于外缘吗？

div span{
  font-weight:bold;
  outline: 2px solid green;
  box-shadow: 2px 2px 5px;
}

这是我要查找的文本外阴影的 sn-p：

【问题讨论】：

你的小提琴是空的！请贴出相关代码
我的错：jsfiddle.net/6nrzkodu
所以你想在你的轮廓周围有一个盒子阴影？我们不知道您的成品应该是什么样子
我想我理解您想要做什么，但我认为仅使用 CSS 还不能轻松完成。 “大纲”的目的是为了便于访问，例如屏幕阅读器，并且在样式方面非常有限。正如您在应用于内联元素时看到的那样，box-shadow 出现在每一行环绕文本的周围，这不是您想要的。
是的，轮廓周围有一个盒子阴影。

【解决方案1】：

所以你想要一个围绕块的轮廓？

尝试将其显示为内联块：

div span{
  font-weight:bold;
  outline: 2px solid green;
  box-shadow: 2px 2px 5px;
  display: inline-block;
}

【讨论】：

【解决方案2】：

只需将 display:block 添加到您的元素，因此它仍然是内联的，但现在它是一个元素块。您可能想使用<mark> 而不是<span>。对于 HTML 语义等... 干杯；）

div span{
  font-weight:bold;
  outline: 2px solid green;
  box-shadow: 2px 2px 5px;
  display:inline-block;

}

【讨论】：