如何实现这样的文字阴影？

Question

我想在文字下方添加阴影，如附图所示。在附件中，我们可以看到文本 "website" 下有一个阴影。我尝试使用下面的代码但没有成功。任何帮助将不胜感激。

#testbtn {
  display: block;
  color: #000000;
  font-weight: bold;
  text-align: center;
  margin: 0 auto;
  border: 1px solid #0098DB;
  padding: 8px 8px;
  background: #575857;
  max-width: 200px;
  border-radius: 10px;
}

.trying {
  color: white;
  content: "";
  box-shadow: 5px 5px 5px black;
  text-transform: rotateX(70deg);
}

<a id="testbtn"><span class="trying">Test</span></a>

Answer 1

您可以尝试使用text-shadow CSS 属性并使用CSS 绘制平行四边形。

语法如下：

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

您可以查看 w3schools link 了解更多信息。

在最基本的意义上，您可以直接在 .trying class 上应用阴影：

text-shadow: 1px 1px 3px #000000;

这会在文本本身上产生阴影，但是，我不相信 text-shadow 属性能够按照您的意愿进行操作，就您所附 JPG 中的阴影而言. （您需要绘制形状或使用精灵）。

正如另一位评论者所说，您能否提供您看到该图片的原始页面，以便分析他们是如何获得结果的？

您应用的框阴影不会直接向文本添加阴影，而是向元素边框本身添加阴影（因此阴影位于 Test 文本的异常值上）。

这里还有一些来自 w3schools 的更多信息，关于 sprites，如果您选择走那条路——这是您可以做到的另一种方式，但可能最好只使用形状绘图和文本阴影通过 CSS。

绘图形状编辑：

这是一个绘制平行四边形的代码——您可以修改它来实现您可能想要的效果：

#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
    background: red;
}

感谢 CSS 技巧，这是 drawing shapes 上的完整 link 和 CSS。如果您创建了第二个元素，并使用 relative/absolute 定位和 z-index，您可以将其放在导航文本下方。只需修改颜色，也许给它一些不透明度（修改上面的代码片段），你应该在路上......

Answer 2

不完全一样，但很接近。

body {
  background-color: #9FCDE8;
}

.shadow1 {
  color: white;
  font-size: 30pt;
  text-shadow:
   1px  1px  5px #7FA4B8,
   2px  2px  5px #7FA4B8,
   3px  3px  5px #7FA4B8,
   4px  4px  5px #7FA4B8,
   5px  5px  5px #7FA4B8,
   6px  6px  5px #7FA4B8,
   7px  7px  5px #7FA4B8,
   8px  8px  5px #7FA4B8,
   9px  9px  5px #7FA4B8,
  10px 10px  5px #7FA4B8,
  11px 11px  5px #7FA4B8,
  12px 12px  5px #7FA4B8,
  13px 13px  5px #7FA4B8,
  14px 14px  5px #7FA4B8,
  15px 15px  5px #7FA4B8,
  16px 16px  5px #7FA4B8,
  17px 17px  5px #7FA4B8,
  18px 18px  5px #7FA4B8,
  19px 19px  5px #7FA4B8,
  20px 20px  5px #7FA4B8,
  21px 21px  5px #7FA4B8,
  22px 22px  5px #7FA4B8,
  23px 23px  5px #7FA4B8,
  24px 24px  5px #7FA4B8,
  25px 25px  5px #7FA4B8,
  26px 26px  5px #7FA4B8,
  27px 27px  5px #7FA4B8,
  28px 28px  5px #7FA4B8,
  29px 29px  5px #7FA4B8,
  30px 30px  5px #7FA4B8,
  31px 31px  5px #7FA4B8,
  32px 32px  5px #7FA4B8,
  33px 33px  5px #7FA4B8,
  34px 34px  5px #7FA4B8,
  35px 35px  5px #7FA4B8,
  36px 36px  5px #7FA4B8,
  37px 37px  5px #7FA4B8,
  38px 38px  5px #7FA4B8,
  39px 39px  5px #7FA4B8,
  40px 40px  5px #7FA4B8,
  41px 41px  5px #7FA4B8,
  42px 42px  5px #7FA4B8,
  43px 43px  5px #7FA4B8,
  44px 44px  5px #7FA4B8,
  45px 45px  5px #7FA4B8,
  46px 46px  5px #7FA4B8,
  47px 47px  5px #7FA4B8,
  48px 48px  5px #7FA4B8,
  49px 49px  5px #7FA4B8,
  50px 50px  5px #7FA4B8;
}

.shadow2 {
  margin-left: 50px;
  margin-right: 50px;
  color: white;
  font-size: 30pt;
  text-shadow:
   1px  1px 10px #7FA4B8,
   2px  2px 10px #7FA4B8,
   3px  3px 10px #7FA4B8,
   4px  4px 10px #7FA4B8,
   5px  5px 10px #7FA4B8,
   6px  6px 10px #7FA4B8,
   7px  7px 10px #7FA4B8,
   8px  8px 10px #7FA4B8,
   9px  9px 10px #7FA4B8,
  10px 10px 10px #7FA4B8,
  11px 11px 10px #7FA4B8,
  12px 12px 10px #7FA4B8,
  13px 13px 10px #7FA4B8,
  14px 14px 10px #7FA4B8,
  15px 15px 10px #7FA4B8,
  16px 16px 10px #7FA4B8,
  17px 17px 10px #7FA4B8,
  18px 18px 10px #7FA4B8,
  19px 19px 10px #7FA4B8,
  20px 20px 10px #7FA4B8,
  21px 21px 10px #7FA4B8,
  22px 22px 10px #7FA4B8,
  23px 23px 10px #7FA4B8,
  24px 24px 10px #7FA4B8,
  25px 25px 10px #7FA4B8,
  26px 26px 10px #7FA4B8,
  27px 27px 10px #7FA4B8,
  28px 28px 10px #7FA4B8,
  29px 29px 10px #7FA4B8,
  30px 30px 10px #7FA4B8,
  31px 31px 10px #7FA4B8,
  32px 32px 10px #7FA4B8,
  33px 33px 10px #7FA4B8,
  34px 34px 10px #7FA4B8,
  35px 35px 10px #7FA4B8,
  36px 36px 10px #7FA4B8,
  37px 37px 10px #7FA4B8,
  38px 38px 10px #7FA4B8,
  39px 39px 10px #7FA4B8,
  40px 40px 10px #7FA4B8,
  41px 41px 10px #7FA4B8,
  42px 42px 10px #7FA4B8,
  43px 43px 10px #7FA4B8,
  44px 44px 10px #7FA4B8,
  45px 45px 10px #7FA4B8,
  46px 46px 10px #7FA4B8,
  47px 47px 10px #7FA4B8,
  48px 48px 10px #7FA4B8,
  49px 49px 10px #7FA4B8,
  50px 50px 10px #7FA4B8;
}

.shadow3 {
  color: white;
  font-size: 30pt;
  text-shadow:
   1px  1px 15px #7FA4B8,
   2px  2px 15px #7FA4B8,
   3px  3px 15px #7FA4B8,
   4px  4px 15px #7FA4B8,
   5px  5px 15px #7FA4B8,
   6px  6px 15px #7FA4B8,
   7px  7px 15px #7FA4B8,
   8px  8px 15px #7FA4B8,
   9px  9px 15px #7FA4B8,
  10px 10px 15px #7FA4B8,
  11px 11px 15px #7FA4B8,
  12px 12px 15px #7FA4B8,
  13px 13px 15px #7FA4B8,
  14px 14px 15px #7FA4B8,
  15px 15px 15px #7FA4B8,
  16px 16px 15px #7FA4B8,
  17px 17px 15px #7FA4B8,
  18px 18px 15px #7FA4B8,
  19px 19px 15px #7FA4B8,
  20px 20px 15px #7FA4B8,
  21px 21px 15px #7FA4B8,
  22px 22px 15px #7FA4B8,
  23px 23px 15px #7FA4B8,
  24px 24px 15px #7FA4B8,
  25px 25px 15px #7FA4B8,
  26px 26px 15px #7FA4B8,
  27px 27px 15px #7FA4B8,
  28px 28px 15px #7FA4B8,
  29px 29px 15px #7FA4B8,
  30px 30px 15px #7FA4B8,
  31px 31px 15px #7FA4B8,
  32px 32px 15px #7FA4B8,
  33px 33px 15px #7FA4B8,
  34px 34px 15px #7FA4B8,
  35px 35px 15px #7FA4B8,
  36px 36px 15px #7FA4B8,
  37px 37px 15px #7FA4B8,
  38px 38px 15px #7FA4B8,
  39px 39px 15px #7FA4B8,
  40px 40px 15px #7FA4B8,
  41px 41px 15px #7FA4B8,
  42px 42px 15px #7FA4B8,
  43px 43px 15px #7FA4B8,
  44px 44px 15px #7FA4B8,
  45px 45px 15px #7FA4B8,
  46px 46px 15px #7FA4B8,
  47px 47px 15px #7FA4B8,
  48px 48px 15px #7FA4B8,
  49px 49px 15px #7FA4B8,
  50px 50px 15px #7FA4B8;
}

<span class="shadow1">a website</span>
<span class="shadow2">a website</span>
<span class="shadow3">a website</span>

Answer 3

我同意@natureminded。我认为文本转换不是实现此结果的最佳选择。他们发布答案后，我正在起草这个示例，但它遵循相同的思考过程

#testbtn {
  position: relative;
  display: block;
  color: #000000;
  font-weight: bold;
  text-align: center;
  margin: 0 auto;
  border: 1px solid #0098DB;
  padding: 8px 8px; 
  background:#575857;
  max-width: 200px;
  border-radius: 10px;
  z-index: -3;
}

.trying{
  position: relative;
  color:white;
} 

.trying:before{
  content:"";
  position: absolute;
  width: 100%;
  left: 6px;
  top: 7px;
  height: 110%;
  background-color:rgba(0,0,0, .5);
  transform: skew(35deg);
  z-index:-1;
}

<a id="testbtn"><span class="trying">Test</span></a>

如何实现这样的文字阴影？

How to achieve text shadow like this?

css

box-shadow