Question

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

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

但考虑到我需要具有完全响应的站点，其中对象流畅地缩放（不仅在断点处），这会产生问题 - 我只能以绝对单位（em或px）设置阴影扩展属性。

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

任何解决方案？请不要jQuery，只是纯CSS。

由于

Answer 1

如果您在插入 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 2

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

rem单元总是相对于根html元素，所以它会相应缩放，你不必担心内部容器或类似的东西。此时它还拥有非常广泛的浏览器支持。

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

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

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

Answer 3

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

例如，下面的CSS代码将框阴影的“扩展半径”设为div宽度的20％：

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

Answer 4

您是否希望盒子阴影随容器的宽度或容器的高度而缩放？你不能真正指定阴影的高度和宽度，只能指定一个点差。因此，如果您的容器宽度缩小10％但高度不会缩小，那么您的阴影将缩小10％（如果可能的话），即您的阴影高度会缩放，即使它可能不会缩放。

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

但是，您永远无法缩放实际阴影，只能缩放阴影的容器。因此，您将在主容器中创建一个容器，然后为其提供负边距并附加盒阴影。但是，当您缩小容器时，您很快就会注意到阴影实际上会增长而不是缩小。

如果不使用媒体查询或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>

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

4 个答案: