PNG阴影，液体高度

Question

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

事实

1. 我的元素已预先定义，更重要的是固定像素宽度
2. 根据其内容
，它们具有流体高度（auto）
3. 他们直接在元素中包含内容，而某些子元素将位于其边框之外
4. 可以使用CSS3，但应避免性能关键部分（渐变，阴影......）
5. 可以无限制地使用CSS伪元素

要求

1. 为了拥有流体阴影，不应添加额外的包装元素
2. 应用程序应在移动浏览器上顺利运行 - 由于处理能力远低于台式计算机，因此阴影似乎会大大降低移动设备的性能。

可能的方向

我想过使用:before和:after伪来显示包含元素的顶部到底部和底部阴影，但这些伪显示在其父元素和定位父z-index之间高于这些孩子没有效果。

最终结果的可视化演示

纯CSS3中的JSFiddle Demo我希望实现但使用PNG阴影。实际上有很多这样的盒子，所以你可以想象移动浏览器正在努力应对所有这些阴影。

项目就是一个需要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 LESS

.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;
}

只需更改后面的背景即可。

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

相关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