Question

不知怎的，我觉得这很奇怪，我自己无法解决。

我有一个大型的box-shadow形式，它与父容器的顶部内部（插入）box-shadow重叠。我需要让父母的黑色嵌入阴影可见。

请参阅 fiddle

z-index什么也没做。

我的CSS：

#description {
    display: block;
    overflow: hidden;
    box-shadow: inset 0px 17px 11px -15px #000;
    padding-top: 10px!important;
    }
.upload {
    float: left;
    width: 696px;
    margin-top: 1em;
    border: 1px solid #546E7A;
    font-family:"Roboto", sans-serif;
    background-color: #fff;
    box-shadow: 0px -17px 0px 20px #546E7A;
    }

孩子怎么回事？

Answer 1

您无法让shadow显示父shadow，因为element属于同一个z-index，因此:pseudo不起作用，但您可以使用shadow并向其添加#description:before { content:''; position:absolute; width:100%; height:100%; left:0; top:0; box-shadow: inset 0px 17px 11px -15px #000; }

演示 - http://jsfiddle.net/ccspw1dh/3/

<div class="sort">
    <label for="sort"><span>Sort by:</span></label>
    <select name="sort" id="sort">
        <option selected="selected" disabled="disabled" style="display:none;">Choose...</option>
        <option
            <c:if test="${pagination.sortOn eq 'time' and pagination.asc}">selected="selected"</c:if>
            data-text="DESC" value="time"
            data-order="asc">
            DESC
        </option>
        <option
            <c:if test="${pagination.sortOn eq 'time' and not pagination.asc}">selected="selected"</c:if>
            data-text="ASC" />" value="time"
            data-order="desc">
            ASC
        </option>
    </select>
</div>

Answer 2

z-index无济于事，因为.upload是#description的子节点，其显示的优先级始终高于#description。

这就像在div中创建一个背景为黑色的div，背景为白色。所有你会看到的是黑色。父母的盒子阴影仍在那里，但是儿童阴影的绘制完全覆盖了它。

要解决您的问题并仍然看到发光，您可以在.upload中将其缩小：

box-shadow: 0px -17px 0px 1px #546E7A;

http://jsfiddle.net/ccspw1dh/2/

此外，你可以像这里链接盒子阴影：

box-shadow: 0px -17px 0px 1px #546E7A, inset 0px 17px 11px -15px #000;

http://jsfiddle.net/ccspw1dh/4/

子元素的盒子阴影优于父母的？

2 个答案: