Polymer 纸张标题面板-无法设置阴影样式_Polymer_Polymer 1.0

Polymer 纸张标题面板-无法设置阴影样式

polymer

Polymer 纸张标题面板-无法设置阴影样式,polymer,polymer-1.0,Polymer,Polymer 1.0,使用Polymer 1.1，我想在纸张标题面板…上使投影永久化，即使我没有滚动。但现在，我根本无法设计阴影的样式。我在滚动无效时应用的这个样式。在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);

使用Polymer 1.1，我想在

纸张标题面板

…上使投影永久化，即使我没有滚动。但现在，我根本无法设计阴影的样式。我在滚动无效时应用的这个样式。在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>


纸头面板{
--纸张标题面板阴影：{
盒影：嵌入100px 100px 100px 100px rgba（0,0,0,0.4）；
}
接触
福
酒吧

我做错了什么？这是根据文档

如果你想增加阴影的高度，仅仅增加第二个参数（即阴影的

垂直长度

）是不够的，你还需要给drapshadow

div

一个更大的

高度

，就像这样-

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

请注意，我还更新了

框阴影

，使其具有更合理的属性。

找到了根本原因：

事实证明，新版本的Chrome没有响应聚合物API，而旧版本的Chrome没有响应

我也试过了，但没有成功。另一种方法相当于……看看这个（），这就是你想要的吗？看到压缩后的阴影。我看到压缩后的阴影，但不是100px或接近那个大小的。看起来它正在使用。好的，我现在看到你想要的了，你还想增加

高度

，可能使阴影属性更合理。看到这个（）.

高度：100px；方框阴影：插入100px 100px 100px 100px rgba（0,0,0,0.4）；