当父元素溢出隐藏时显示子元素的框阴影? [英] Show box-shadow of child element while parent element has overflow hidden?

问题描述

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

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

然而，这隐藏了左 &元素的右阴影.

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

有什么想法吗?

CSS:

.noscrollbar {位置:相对；向左飘浮;高度:300px；宽度:500px；溢出:隐藏；}.scroller {位置:相对；向左飘浮;高度:100%；宽度:100%；溢出:自动；padding-right: 60px;}.scroller div {向左飘浮;宽度:100%；高度:50px；底边距:20px；背景颜色:蓝色；框阴影:1px 1px 10px 1px 黑色；}.scroller div:nth-child(1) {边距顶部:20px；}

HTML:

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

解决方案

也许你可以这样试试

.scroller div {向左飘浮;宽度:计算(100% - 10px)；高度:50px；边距:0 5px 20px;背景颜色:蓝色；框阴影:1px 1px 10px 1px 黑色；}

<块引用>

margin : top rightleft bottom;

width : 计算宽度 - margin+padding;

You can see the problem I'm having here : https://jsfiddle.net/xa6b8qmm/

I'm using overflow: hidden because I want to hide the scrollbar

However, this hides the left & right shadow of the elements.

I can't find a way to hide the scrollbar while at the same time allow for left/right sides of the box-shadow property to be visible.

Any ideas ?

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>

解决方案

Maybe you can try like this

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

这篇关于当父元素溢出隐藏时显示子元素的框阴影?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！