Question

我在叠加层中使用了一个按钮。我无法理解为什么文字阴影不会显示在＆＃34;显示更多＆＃34;按钮内的文字。

HTML：

 <a href="http://www.mysite.co.uk/promotions/cashback.htm" class="apply">Find out more<img src="img/glyphicons-224-chevron-right.png" class="chevronr" alt="some_text"></a>

CSS：

.apply {
  display: inline-block;
  background: linear-gradient(#98e901 ,#5ba119);
  vertical-align: middle;
  box-shadow: 0 4px 0 rgba(69,69,69,.11);
  text-align: center;
  text-shadow: 0, 4, 4, 0;
  border-radius: 4px;
  padding-top: 8px;
  padding-right: 42px;
  padding-bottom: 8px;
  padding-left: 42px;
  color: #fff;
  font-family: Raleway, arial, helvetica, sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 50px;
  margin-bottom: 30px;
  letter-spacing: -1px;
}

我无法在样式中看到任何可能发生冲突的内容，但在测试浏览器时是否会渲染文字阴影？

Answer 1

请尝试以下操作： Demo 1

 text-shadow: 2px 2px 2px #000;

或者像这样： Demo 2

text-shadow: 0px 4px rgba(0, 4, 4, 0.4);

Answer 2

您的text-shadow媒体资源无效。如果有4个属性，则格式应为offset-x offset-y blur-radius color或color offset-x offset-y blur-radius。注意使用空格分隔符而不是逗号分隔符 - 逗号用于分隔多个阴影。

要重写问题中提供的示例，对意图做出假设，那就是：

text-shadow: 0 4px 4px #000;

More information on text-shadow

Answer 3

文本阴影通常用于px格式的数字，所以

text-shadow: 0, 4, 4, 0;

必须是

 text-shadow: 0px  4px 4px ;

Answer 4

您已使用

text-shadow: 0, 4, 4, 0;

不幸的是，它有一些问题。

Text-shadow属性采用

的值

Value: none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit

此属性接受以逗号分隔的阴影效果列表应用于元素的文本。阴影效果应用于指定的顺序，因此可以相互叠加，但他们会从不覆盖文本本身。〜w3.org

这意味着它只需要三个值，而不是四个。

您也缺少申报单位（我已使用px进行此演示）。

text-shadow: 3px 3px 5px red;

是有效的声明。

它将在哪里

在元素的文本右侧和下方放置阴影。阴影的模糊半径为5px，为红色。

为什么在这个按钮上没有文字阴影节目？

4 个答案: