有没有办法用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>