在文本内容周围显示紧跟在内嵌框后面的阴影

Question

我正在努力实现一种效果，即我有一个紧跟文本内容的阴影。

我已在此处记录了我的进展：https://codepen.io/wolfr/pen/QEGOdY?editors=1100

text-shadow并不符合我的需求。它产生一个较差的阴影（测试：https://codepen.io/wolfr/pen/KMNyXj?editors=1100）

我目前的方法存在的问题是，对于使用屏幕阅读器的人来说，这是非常糟糕的。

我尝试了几种隐藏HTML内容的方法，以免被另一支笔here中的读者阅读。它们包括使用媒体查询和speak: none属性。他们都没有工作。因为我实际上需要它的布局，所以我不能将盒子放在屏幕外（经典方法）。我也尝试将内容隐藏在:before attribute中，但这也不起作用。

Answer 1

你想制作一个阴影，紧跟周围的文字？如果这样做，您可以使用多个文本阴影来制作更精细的阴影。

＆＃13;

＆＃13;

p {
  color: #d53400;
  font-size: 32pt;
  font-weight: 500;
  text-shadow: 2px 0 8px #555, -2px 0 0 #555, 0 2px 0 #555, 0 -2px 0 #555, 1px 1px #555, -1px -1px 0 #555, 1px -1px 4px #555, -1px 1px 0 #555;
  text-align: center;
}

＆＃13;

<p>Text shadow<br />This is another line</p>

＆＃13;

＆＃13;

＆＃13;