CSS属性的box-shadow不与白色工作

Question

下面是我申请鼠标悬停我的形象标签的CSS类：

div#simpleSearch button#searchButton > img:hover {
    /* Box-shadow */
-moz-box-shadow: 0px 0px 13px #AFAFAF; 
     box-shadow: 0px 0px 13px #AFAFAF;

    /* Border-Radius */
-moz-border-radius: 100px; /* Firefox */
  -o-border-radius: 100px;
     border-radius: 100px; /* CSS3 */
}

这是工作的罚款。但是，如果我有任何#AFAFAF或white更换#FFFFFF，没有边框应用到我的形象。我要补充的是，现场背景为灰色，所以一道白影是可见的。

正如有人已经经历过这个？任何解决办法的建议是值得欢迎的。

Answer 1

尝试

-moz-box-shadow: 13px 13px 0px 0px #FFFFFF;
-webkit-box-shadow: 13px 13px 0px 0px #FFFFFF;
 box-shadow: 13px 13px 0px 0px  #FFFFFF;

在过去的2个值是可选的as seen here

Answer 2

在这里，你能想出这样一个解决方案，如果你需要添加一些白色的顶部和底部box-shadow例如div元素：

div:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 60px 50px -30px #ffffff, inset 0px -60px 50px -30px #ffffff;
  z-index: 1;
}

不要忘记添加的z-index。

Answer 3

我做了快速的jsfiddle但简化的CSS只使用一个ID，它的做工精细，它显示白色时，悬停。

请确保你的CSS是真正应用到您的内容

http://jsfiddle.net/fc9dJ/17/