当父元素溢出隐藏时显示子元素的框阴影? [英] 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:
也许你可以这样试试
.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屋!