javascript - 有没有办法用 JavaScript/CSS 制作 3D 文本效果

Question

我的网站上有一个标题，我希望它看起来像一个 3D 绘制的标题 - 如下图所示:

我应该怎么做？我尝试创建一个 <div>元素用相同的文本放在它后面但效果不同，但这没有用。我怎样才能做到最好？到目前为止，我的代码如下。

<h1>My Header Here</h1>

CSS

h1 {
    color: white;
    border-color: black;
}

解决方案不一定是纯CSS，可以是JS，但不能有外部库(除了jQuery)

Answer 1

你可以像这样使用很多 text-shadow:

body{ font-family: sans-serif; font-size: 2em; }

.coolShadow {
    color: white; 
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    text-shadow: 
      -1px 1px 0 #000,
      -2px 2px 0 #000,
      -3px 3px 0 #000,
      -4px 4px 0 #000,
      -5px 5px 0 #000,
      -6px 6px 0 #000,
      -7px 7px 0 #000;
}

<h1 class="coolShadow">My Header Here</h1>
<h2>No shadows for me :(</h2>
<h3 class="coolShadow">I'M COOL! :)<h3>