Question

使用 Polymer 1.1 ，我想在paper-header-panel ....上使投影永久化，即使我不滚动。但是现在，我根本无法塑造阴影。我在滚动时应用的这种样式没有生效。它应该在100px时退出：

<style is="custom-style">
  paper-header-panel {
      --paper-header-panel-shadow: {
         box-shadow: inset 100px 100px 100px 100px rgba(0, 0, 0, 0.4);
  }
</style>

  </head>
  <body class="fullbleed layout vertical">
    <paper-header-panel mode="waterfall-tall" class="flex">
      <paper-toolbar>
        <div class='title'></div>
        <paper-tabs>
          <paper-tab>
            <div>contact</div>
          </paper-tab>
        </paper-tabs>
        <div class='title bottom'>
          <h1 id="name-title">Foo</h1>
        </div>
      </paper-toolbar>
      <div style="height: 2000px">
        <section hero>
          <h2>Bar</h2>
        </section>
      </div>
    </paper-header-panel>
  </body>

我做错了什么？这是根据文档https://github.com/PolymerElements/paper-header-panel

Answer 1

如果你想增加阴影的高度，仅仅增加第二个参数（即阴影的vertical length）是不够的，你还需要给出 drapshadow div一个更大的height，就像这样 -

  paper-header-panel {
      --paper-header-panel-shadow: {
        height: 24px;
        box-shadow: inset 0 24px 4px -4px rgba(0,0,0,0.4);
      };
  }

请注意，我还更新了box-shadow以获得更合理的属性。

Answer 2

找到根本原因：

事实证明，新旧版本的Chrome没有响应Polymer API，而旧版本的Chrome则没有。

https://github.com/Polymer/polymer/issues/2307

paper-header-panel - 无法设置阴影样式

2 个答案: