溢出区域外的盒子阴影

时间:2015-12-12 09:00:10

标签: html css overflow box-shadow

我在容器内有几个盒子,容器设置为溢出:隐藏以确保一切都停留在它的位置并带走溢出:隐藏(特别是overflow-x:hidden)不是选项。

我试图给盒子一个盒子阴影,但是当这样做时,右边缘的盒子右边的阴影显然没有出现,因为父对象停在那里并且没有溢出

有没有办法解决这个问题?

Image showing what I mean

2 个答案:

答案 0 :(得分:5)

你可以在内部div中添加边距吗?

    #inner-div {
      margin: 10px
    }

检查此JSFiddle

答案 1 :(得分:0)

试试这个:

    div {
        top: 100px;
        position: absolute;
        left: 100px; height: 50px;
        width: 200px;
        -webkit-box-shadow: 
            5px 5px 5px #000, 
            inset 0 0 5px #000;
        border-radius: 5px;
        background: white;
    }

UPDATED DEMO