46

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

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

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

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

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

4

5 回答 5

20

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

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

或者，如果您的父对象恰好是窗口，您可以使用视口单位：vw和vh.

于 2015-11-23T13:03:30.097 回答
7

如果您在插入 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是一个非常有用的工具，用于生成径向（以及其他）渐变以及必要的前缀。

于 2014-11-26T15:48:02.600 回答
4

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

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

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

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

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

于 2013-01-02T11:20:19.637 回答
2

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

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

div {
    --width: 100px;
    width: var(--width);
    box-shadow: 0 0 0 calc(var(--width) * 0.2) #aaa;
}
于 2020-03-21T14:07:38.350 回答
0

您希望 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>
于 2014-07-11T22:19:15.403 回答