具有流体高度的 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 的背景更改为您的图像。

我已将此解决方案应用于您的小提琴。

相关的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 个元素，只是为了避免拉伸图像（如您所说）。问题是我们只有 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