Question

在下面的示例中，第一个纸阴影之前的div隐藏了纸阴影的边框。没有div的第二个纸影是可见的。我想将div用于布局目的（中心）。

可能是什么原因？这有什么问题？

div的原因是，我想将纸阴影与布局属性（如“布局水平中心”）居中。在core-pages标记中使用此属性不起作用。

我不想为这个简单的目标写一些额外的css布局规则。

这是ele.io中的代码

在ele.io由于某些原因，两个纸影元素的边界都不可见??

代码：

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <link rel="import" href="../bower_components/polymer/polymer.html">
  <link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
  <link rel="import" href="../bower_components/core-pages/core-pages.html">
  <link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
  <link rel="import" href="../bower_components/paper-shadow/paper-shadow.html">
  <style>
    .card {
      width: 880px;
      height: 400px;
      margin: 16px;
    }
  </style>
</head>

<body fullbleed layout vertical>
  <template is="auto-binding" id="templ">
    <core-header-panel flex>

      <core-toolbar class="medium-tall">
        <h1>Test</h1>
        <paper-tabs class="bottom fit" selected="{{selectedPage}}">
          <paper-tab>Page1</paper-tab>
          <paper-tab>Page2</paper-tab>
        </paper-tabs>
      </core-toolbar>

      <core-pages selected="{{selectedPage}}">
        <!-- this div hides the paper-paper-shadow -->
        <div>
          <paper-shadow z="1" class="card" layout vertical center-center>
            Page 1
          </paper-shadow>
        </div>
        <!-- this paper-shadow is visible -->
        <paper-shadow z="1" class="card" layout vertical center-center>
          Page 2
        </paper-shadow>
      </core-pages>
    </core-header-panel>
    <script>
      var templ = document.querySelector('#templ');
      templ.selectedPage = 0;
    </script>
  </template>
</body>

</html>

Core-Pages中的纸张阴影 - Div标签隐藏聚合物纸张阴影

0 个答案: