css - 具有流体高度的 PNG 阴影

Question

由于浏览器性能影响，我不能使用 box-shadow CSS 属性，因为我的页面上有许多外观相似的元素，它们应该具有相同的外观样式，包括阴影。这就是我想使用传统 PNG 图像实现阴影的原因。

事实

1. 我的元素已经预定义并且更重要的是固定像素宽度
2. 它们具有流体高度(auto)，具体取决于它们的内容
3. 它们直接在元素中有内容，一些子元素将位于它们的边界之外
4. 可以使用 CSS3，但应避免性能关键部分(渐变、阴影...)
5. 可以不受限制地使用CSS伪元素

要求

1. 不应添加额外的包装元素以产生流畅的阴影
2. 应用程序应在移动浏览器上流畅运行 - 阴影似乎会显着降低移动设备上的性能，因为它们的处理能力远低于台式机。

可能的方向

我想过使用 :before 和 :after 伪元素在包含元素上显示从上到下和底部的阴影，但这些伪元素显示在它们的父元素中将父级 ​​z-index 定位在高于这些子级的位置没有任何效果。

最终结果的可视化演示

这JSFiddle Demo在我想实现的纯 CSS3 中，但使用 PNG 阴影。实际上，有很多这样的框，所以您可以想象移动浏览器正在与所有这些阴影作斗争。

Item 就是这样一个需要 PNG 阴影的盒子(见下图)。左侧菜单是位于框外的子元素。

在 Chrome 中显示

HTML

<div class="item">
    <menu>
        <li><a href="#">Yes</a></li>
        <li><a href="#">No</a></li>
        <li><a href="#">Maybe</a></li>
    </menu>
    <div class="content">
        Some content
    </div>
</div>

少用 CSS3

.item {
    position: relative;
    width: 300px;
    background-color: #fff;
    box-shadow: 0 0 10px #ccc;
    margin: 20px 20px 20px calc(20px + 3.5em);
    min-height: 5em;

    &:first-child {
        margin-top: 0;
    }

    &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 5em;
        background-color: #fff;
    }

    menu {
        position: absolute;
        top: 0;
        left: -3.5em;
        width: 3.5em;
        margin: 0;
        border: 0;
        padding: 0;
        list-style: none;
        background-color: #fff;
        box-shadow: 0 0 10px #ccc;

        li a {
            display: block;
            text-align: center;
            padding: 2px 0;
        }
    }

    .content {
        padding: .75em 1em;
    }
}

Answer 1

可能我遗漏了什么，但看起来你想要这样的东西:

demo

CSS 是

.base {
    width: 300px;
    height: 150px;
    font-size: 100px;
    font-weight: bolder;
    background-color: lightgreen;
    position: relative;
    z-index: auto;
}

.base:after {
    content: '';
    position: absolute;
    top: 30px;
    left: 30px;
    background-color: green;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.child {
    position: absolute;
    left: 150px;
    top: 50px;
    border: solid 1px black;
    color: red;
}

只需将 :after 的背景更改为您的图像即可。

我已将此解决方案应用于您的 fiddle 。

相关CSS是针对before伪元素的:

.item:before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    z-index: -1;
    background-image: url(http://placekitten.com/100/100);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

我使用了一张小猫图片，它正在缩放以覆盖所有需要的尺寸。只需将其更改为您想要的任何内容即可。

我需要那样做，因为我只有一个可用的伪元素。

它起作用的关键(以及您可能遇到困难的地方)是将 z-index: auto 添加到 .item

Updated demo

好吧，我说过这是不可能的，但我找到了办法。

标准技术是使用 2 个元素，只是为了避免拉伸(stretch)图像(如您所说)。问题是我们只有 1 个伪元素可用。

解决方案是使用 1 个伪元素，但使用 2 个背景来解决问题。

CSS(仅相关部分)

.item:before {
    background-image: url(http://placekitten.com/320/10), url(http://placekitten.com/320/500);
    background-repeat: no-repeat;
    background-size: 100% 9px, 100% calc(100% - 9px);
    background-position: left bottom, left top;
}

我们需要一张只有 10 像素高的图像(第一个)来覆盖底部阴影。另一个高度足以覆盖可能的最大元素，它将用于阴影的其余部分。黑暗的部分是我们现在需要一个 calc() 高度，但支持有限。 (无论如何，比边框图像更好)

demo 3