html - html 元素上的文本阴影效果

Question

我想为我的标题制作一个类似(或完全相同的阴影效果)(背景颜色也可能是白色，这并不重要)。只有“你好”这个词应该有效果，“那里”应该是这样的:

我试过:

 <div xmlns="http://www.w3.org/1999/xhtml">
            <style>
                .hello {
                   letter-spacing: 6px;
                   color: white;
                   text-shadow: -2px 0 black, 0 -2px black, 2px 0 black, 0 2px black,
                   2px 2px black, -2px -2px black, -2px 2px black, 2px -2px black,
                   4px 3px blue;
                }
            </style>
            <div class="container">
                <h1><span class="hello">Hello</span> there!</h1>
            </div>
        </div>

但我得到的并不那么令人愉快:

有谁知道我怎样才能做到这一点？你也可以改变字体，我不介意!

Answer 1

您可以使用 text-stroke 来实现这一点。 (在文本周围创建边框)并使用 text-shadow将蓝色的正确偏移设置为阴影颜色。color属性应设置为与 background-color 相同周围元素的属性来获得效果。-webkit-text-stroke受到极大支持(仅不在 Internet Explorer 中)，read more about it at MDN .
什么 the properties的 text-shadow做:

text-shadow: [horizontal-offset] [vertical-offset] [blur] [color];

玩转您的需求。

.hello {
  -webkit-text-stroke: 0.09375rem #0d1b1e;
  -o-text-stroke: 0.09375rem #0d1b1e;
  text-stroke: 0.09375rem #0d1b1e;
  color: #f2cee6;
  letter-spacing: 6px;
  text-shadow: 5px 5px 0px #2dc7ff;
}

/* For demo purpose only: background-color should match surrounding color for effect */
body {
  font-family: sans-serif;
  font-size: 50px;
  background-color: #f2cee6;
}

<h1><span class="hello">Hello</span> there!</h1>