CSS3 盒子阴影大小 - 百分比单位？

Question

我正在开发一个需要使用 CSS3 box-shadow 属性的项目。 没关系，但我发现阴影的散布大小不能设置为父对象的百分比。

我完全理解 box-shadow 不是附加的，因此它不会以父级的大小作为参考。

但是考虑到我需要一个完全响应的站点，并且对象可以流畅地缩放（不仅在断点上），但这也带来了一个问题——我只能以绝对单位（em 或 px）将阴影设置为展开属性.

有什么解决办法吗？我曾想过在容器中使用内部容器（用于内容）（用于“阴影”——它没有模糊），但这会产生另一个问题——内部容器的垂直居中。

有什么解决办法吗？请不要使用 jQuery，只需纯 CSS。

Answer 1

我发现阴影的散布大小不能设置为父对象的百分比

没错。但是你可以在父对象上设置font-size，然后在ems中定义对象的大小，用同样的ems来定义box-shadow的大小。

或者，如果你的父对象恰好是窗口，你可以使用viewport units: vw and vh。

Answer 2

如果你在 inset box-shadow 之后，你可以使用径向渐变背景来模仿这种行为。所以而不是 -

box-shadow: inset 0 0 100% #000;

你会使用 -

background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0,rgba(0,0,0,1) 100%);

支持：FF16+、IE10+、Safari 5.1+

我找不到关于 Chrome 何时开始支持该属性的任何明确答案，但我当前的版本 (39.0.2171.65) 肯定支持它。

ColorZilla 是一个非常有用的工具，可用于生成径向（以及其他）渐变以及必要的前缀，如果您决定采用这条路线。

Answer 3

您是否尝试过使用 rem 单元（根 em 单元）？我相信您可以使用它来使其流畅地扩展。

rem 单位总是相对于根 html 元素，所以它会相应地缩放，你不必担心内部容器或类似的东西。在这一点上，它也有相当广泛的浏览器支持。

我在我的项目中使用它以使它们更具响应性，但始终遵循已由 px 或 em 定义的参数，以便以防万一它优雅地失败。例如：

font-size: 14px; font-size: 1.4rem;

这是一篇很棒的文章，解释了您需要了解的有关此单元的所有信息：http://snook.ca/archives/html_and_css/font-size-with-rem

Answer 4

如果元素具有定义的宽度（百分比宽度除外），您可以为宽度创建自定义属性，然后将自定义属性与calc() 函数一起用于框阴影。

例如，下面的 CSS 代码使盒子阴影的“传播半径”为div 宽度的 20%：

div {
    --width: 100px;
    width: var(--width);
    box-shadow: 0 0 0 calc(var(--width) * 0.2) #aaa;
}

Answer 5

您希望 box-shadow 随容器的宽度或容器的高度缩放吗？你不能真正指定阴影的高度和宽度，只能指定一个传播。因此，如果您的容器宽度缩小了 10% 但高度没有缩小，那么您的阴影将缩小 10%（如果可能的话），即您的阴影的高度会缩放，即使它可能不应该缩放。

如果您希望 box-shadow 在高度和宽度方面实际正确缩放，则必须创建多个阴影 - 一个用于高度，一个用于宽度。

但是，您将永远无法缩放实际的阴影，只能缩放阴影的容器。所以你会在你的主容器中创建一个容器，然后给它负边距并附加盒子阴影。但是，您很快就会注意到，当您缩小容器时，您的阴影实际上是在扩大而不是缩小。

在不使用媒体查询或 jQuery 的情况下尝试扩展无法扩展的东西似乎有点矫枉过正。

但是，如果您正在寻找可扩展的边框，即没有模糊的框阴影 :P，那就别无所求：

http://jsfiddle.net/925r2/3/

<style>
    * {
        margin: 0;
        padding: 0;
        border: 0;
        box-sizing: border-box;
    }

    .wrapper {
        position: relative;
        margin: 100px auto 0;
        width: 80%;         /* .content width */
        height: 400px;      /* .content height */
    }

    .content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #fff;   /* .content background */
    }

    .shadow {
        position: absolute;
        top: -10%;          /* .content shadow top height */
        right: -5%;         /* .content shadow right width */
        bottom: -10%;       /* .content shadow bottom height */
        left: -5%;          /* .content shadow left width */
        background: #000;   /* .content shadow, unfortuntely no blur effect */
    }
</style>

<div class="wrapper">
    <div class="shadow"></div>
    <div class="content">This is your content</div>
</div>