css - 在父元素隐藏溢出时显示子元素的框阴影？

Question

您可以在这里看到我遇到的问题：https ://jsfiddle.net/xa6b8qmm/

我正在使用overflow: hidden，因为我想隐藏滚动条

但是，这隐藏了元素的左右阴影。

我找不到隐藏滚动条的方法，同时又允许 box-shadow 属性的左侧/右侧可见。

有任何想法吗 ？

CSS：

.noscrollbar {
    position: relative;
    float: left;
    height: 300px;
    width: 500px;
    overflow: hidden;
}

.scroller {
    position: relative;
    float: left;
    height: 100%;
    width: 100%;
    overflow: auto;
    padding-right: 60px;
}

.scroller div {
    float: left;
    width: 100%;
    height: 50px;
    margin-bottom: 20px;
    background-color: blue;
    box-shadow: 1px 1px 10px 1px black;
}
.scroller div:nth-child(1) {
    margin-top: 20px;
}

HTML：

<div class="noscrollbar">
    <div class="scroller">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

Answer 1

也许你可以试试这样

.scroller div {
    float: left;
    width: calc(100% - 10px);
    height: 50px;
    margin:0 5px 20px;
    background-color: blue;
    box-shadow: 1px 1px 10px 1px black;
}

边距：右上左下；

宽度：计算宽度 - 边距+填充；