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

【问题标题】：paper-header-panel - Can not style the shadowpaper-header-panel - 无法设置阴影样式
【发布时间】：2015-08-18 02:09:34
【问题描述】：

使用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

【问题讨论】：

标签： polymer polymer-1.0

【解决方案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 以具有更合理的属性。

【讨论】：

我也试过了，但没有成功。另一种方式相当于github.com/PolymerElements/paper-header-panel/blob/master/demo/…
嗯...看看这个 (plnkr.co/edit/tzVenBH9kUh83pQNpXsm?p=preview)，这是你想要的吗？看它凝结后出现的阴影。
当它被压缩时我看到了一个阴影，但不是 100 像素甚至接近那个大小的阴影。看起来它正在使用github.com/PolymerElements/paper-header-panel/blob/master/…。
好的，我知道你现在想要什么了，你还想增加height，也许让阴影属性更合理一点。看到这个（plnkr.co/edit/tzVenBH9kUh83pQNpXsm?p=preview）。
height: 100px; box-shadow: inset 100px 100px 100px 100px rgba(0,0,0,0.4);

【解决方案2】：

找到根本原因：

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

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

【讨论】：