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

时间：2017-07-23 19:22:40

标签： css css3 box-shadow

我希望在文字下方获得阴影，如附图所示。在附件中，我们可以看到文本“网站”下的阴影。我尝试使用下面的代码但不成功。任何帮助将受到高度赞赏。

#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>

3 个答案:

答案 0 :(得分：4)

您可以尝试使用text-shadow CSS属性并使用CSS绘制一个parellelogram。

语法如下：

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

您可以查看有关它的w3schools链接以获取更多信息。

从最基本的意义上讲，您可以直接将阴影应用于.trying类：

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

这会在文本本身上产生阴影，但是，我不相信text-shadow属性能够做到你所希望的，关于附加JPG中的阴影。 （您需要绘制一个形状或使用精灵）。

正如另一位评论者指出的那样，您能否提供您在其中看到图像的原始页面，以便分析他们如何实现结果？

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

如果你选择追求那条路线，还可以在sprites上获取w3schools的更多信息 - 这是你可以做到的另一种方式，但最好只使用形状绘图和文字-shadow通过CSS。

为绘制形状编辑：

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

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

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

答案 1 :(得分：3)

我同意@natureminded。我不认为文本转换最适合实现这一结果。我们在发布他们的答案之后起草了这个例子，但它遵循相同的思考过程

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<a id="testbtn"><span class="trying">Test</span></a>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：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>

相关问题
最新问题