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

Question

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

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

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

我找不到隐藏滚动条同时允许框阴影属性的 left/right 边可见的方法。

有什么想法吗？

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

margin : top rightleft bottom;

width : calculate width - margin+padding;

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

Show box-shadow of child element while parent element has overflow hidden?

css

overflow

box-shadow