在Chrome设置中，哪种样式用于实现盒子的盒子阴影？

Question

在Chrome设置中，使用哪种样式来获得框的框阴影？

例如：

Answer 1

您可以使用与检查任何其他网页相同的方式来检查设置页面，因为它们是用HTML和CSS实现的，并且呈现得像网页一样。

设置部分是通过如下所示的组件实现的：

<dom-module id="settings-section" assetpath="settings_page/" css-build="shadow">
  <template>
    <style scope="settings-section">/* Styles omitted for brevity */
</style>
    <div id="header">
      <h2 class="title" aria-hidden$="[[getTitleHiddenStatus_(pageTitle)]]">[[pageTitle]]</h2>
    </div>
    <div id="card">
      <slot></slot>
    </div>
  </template>
  </dom-module>

范围为style的元素包含以下CSS规则：

#card {
  box-shadow: var(--cr-card-elevation_-_box-shadow);
        background-color: white;
        border-radius: var(--cr-card-border-radius);
        flex: 1;
}

--cr-card-elevation_-_box-shadow自定义属性的定义如下：

--cr-card-elevation_-_box-shadow:  rgba(60, 64, 67, .3) 0 1px 2px 0,
              rgba(60, 64, 67, .15) 0 1px 3px 1px;