text-shadow只工作一次

时间:2014-12-28 00:18:42

标签: css fonts font-awesome

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

这部分有问题:

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

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

2 个答案:

答案 0 :(得分:4)

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

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

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

  1. 文字阴影
  2. 箱阴影
  3. 小教程: http://www.paulund.co.uk/creating-different-css3-box-shadows-effects

答案 1 :(得分:3)

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

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

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

     

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