Question

我尝试在字体真棒集的星星上应用两个阴影：http://jsfiddle.net/myYUh/117/

这部分有问题：

text-shadow: 2px 2px 2px #190C80;
text-shadow: -2px -2px 2px #190C80;

阴影只是左上角，因此只显示一个阴影，即使我在一行中尝试这个，出了什么问题？

Answer 1

要添加多个阴影，请将它们合并，并与,

分开

 text-shadow: 2px 2px 2px #190C80, -2px -2px 2px #190C80;

这适用于CSS中的所有阴影。

文字阴影
箱阴影

小教程： http://www.paulund.co.uk/creating-different-css3-box-shadows-effects

Answer 2

你用第二个阴影覆盖了第一个阴影。

如果您想要多个阴影，请使用逗号设置它们：

text-shadow: 2px  2px 2px #190C80,
            -2px -2px 2px #190C80;

@import url("http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
@import url("http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css");
.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  font-size: 30px;
}
.rating span.star {
  margin: 0px;
  padding: 0px;
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-shadow: 2px  2px 2px #190C80,
              -2px -2px 2px #190C80;
}
.rating span.star:hover {
  cursor: pointer;
}
.rating span.star:before {
  content: "\f005";
  padding-right: 5px;
  color: #777777;
}
.rating span.star:hover:before,
.rating span.star:hover ~ span.star:before {
  content: "\f005";
  color: yellow;
}

<p class="evaluation_technique">
  <span class="rating">
    <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  </span>
</p>

spec：

中对此进行了解释

<强> text-shadow

此属性接受以逗号分隔的阴影效果列表   应用于元素的文本。

text-shadow只工作一次

2 个答案: