Question

我讨厌发布这样的问题，但我确实疯了。我有一些css来定义一个盒子阴影。它工作正常，然后我突然意识到它不是突然在我的菜单面板上工作。它实际上适用于页面上的每个元素，但菜单面板。

这里是.shadow class css

.shadow {
  box-shadow: 2px 2px 5px 1px rgba(0,0,0, 0.6);
}

这是菜单面板css

.menu-panel {
  position: absolute;
  background-color: white;
  width: 350px;
  visibility: hidden;
}

这是菜单按钮css，它是打开面板的按钮。阴影效果很好。

.menu-button-clipped {
  position: absolute;
  background:url(../images/menu-icon-64.png) no-repeat;
  background-size: 28px 28px;
  background-position: 18px 18px;
  /*background-color: rgba(43, 140, 236, 1.0);*/
  background-color: #F62A2A;
  height: 64px;
  width: 64px;
  border-radius:50%;
  overflow:hidden;
  margin:auto;
}

这是使用Mustache构建HTML模板的javascript。

  var menuButtonTemplate = '<div id={{ menuButtonID }} class="menu-toggle menu-button-clipped shadow"></div>';
  var menuPanelTemplate = '<div id={{ menuPanelID }} class="shadow menu-panel" ><h1>Settings</h1>' +
    '<table class="radio-button-group"><thead><tr><th colspan="2">Graph Options</th></tr></thead><tbody>' +
    '<tr class="graph-toggle" data-name={{ graphName }} ><td>Activate</td><td class="cell activate"><div class=radio-button-off></div></td></tr>' +
    '<tr class="graph-toggle" data-name={{ graphName }} ><td>Deactivate</td><td class="cell deactivate"><div class=radio-button-on></div></td></tr>' +
    '</tbody></table>' +
    '<table class="radio-button-group"><thead><tr><th colspan="2">Axis Options</th></tr></thead><tbody>' +
    '<tr class="graph-toggle" data-name={{ graphName }} ><td>Link</td><td class="cell link_axis"><div class={{ linkedState }}></div></td></tr>' +
    '<tr class="graph-toggle" data-name={{ graphName }} ><td>Un-link</td><td class="cell unlink_axis"><div class={{ unlinkedState }}></div></td></tr>' +
    '</tbody></table>' +
    '<table class="radio-button-group"><thead><tr><th colspan="2">Trace Options</th></tr></thead><tbody>' +
    '<tr class="graph-toggle" data-name={{ graphName }} ><td>Show Traceline</td><td class="cell trace_lines"><div class=radio-button-off></div></td></tr>' +
    '<tr class="graph-toggle" data-name={{ graphName }} ><td>Hide Traceline</td><td class="cell no_trace_lines"><div class=radio-button-on></div></td></tr>' +
    '</tbody></table>' +
    '</div>';

  $('#' + menuButtonID).css({ zIndex: '200', marginLeft: '-26px'});
  $('#' + menuButtonID).css('marginTop', yOffset - 26);
  $('#' + menuPanelID).css({ zIndex: '150', marginLeft: '0px'});
  $('#' + menuPanelID).css('marginTop', yOffset);
  $('#' + menuPanelID).css('height', height);

为了让事情变得简单，以下是普通旧HTML在面板中没有任何内容的样子

<div class="menu-toggle menu-button-clipped shadow"></div>
<div class="shadow menu-panel"><some heading and table stuff></div>

阴影适用于菜单按钮div，但它不会显示在面板上。当我在safari中检查源代码时，它将box-shadow显示为面板的css属性......它实际上并没有实现它。有人能告诉我，我是否在这里犯了一个明显愚蠢的错误？

由于

Box-shadow适用于某些元素而不是其他元素？

0 个答案: