只有三面的箱影

我有两个重叠的div有css3的箱子阴影。麻烦的是，即使我设置了Z-index，我仍然需要消除div的一个box-shadow。我曾见过使用负面价差和零价值的情况，但我认为这不会起作用。只有三面的箱影

我现在的代码是：

#bulb-top { 
    position: relative; 
    width: 280px; 
    height: 280px; 
    background-color: #E5F7A3; 
    -webkit-border-radius: 280px; 
    -moz-border-radius: 280px; 
    border-radius: 280px; 
    border: 8px solid #FFF40C; 
    top: -430px; 
    margin-left: auto; 
    margin-right: auto; 
    -webkit-box-shadow: 0px 0px 15px 1px #FFF40C; 
    -moz-box-shadow: 0px 0px 15px 1px #FFF40C; 
    box-shadow: 0px 0px 15px 1px #FFF40C; 
    z-index: 4; 
} 

#bulb-bottom { 
    position: relative; 
    width: 140px; 
    height: 120px; 
    background-color: #E5F7A3; 
    -moz-border-radius-topleft: 0px; 
    -moz-border-radius-topright: 0px; 
    -moz-border-radius-bottomright: 30px; 
    -moz-border-radius-bottomleft: 30px; 
    -webkit-border-radius: 0px 0px 30px 30px; 
    border-radius: 0px 0px 30px 30px; 
    border-left: 8px solid #FFF40C; 
    border-right: 8px solid #FFF40C; 
    border-bottom: 8px solid #FFF40C; 
    top: -455px; 
    margin-left: auto; 
    margin-right: auto; 
    -webkit-box-shadow: 0px 0px 15px 1px #FFF40C; 
    -moz-box-shadow: 0px 0px 15px 1px #FFF40C; 
    box-shadow: 0px 0px 15px 1px #FFF40C; 
    z-index: 5; 
}

http://jsfiddle.net/minitech/g42vq/3/

来源

2012-04-07 Connor

你能发表[jsFiddle]（http://jsfiddle.net/）吗？ – Ryan 2012-04-07 22:59:12

我开始了这一个http://jsfiddle.net/g42vq/2/，但它不工作... – Connor 2012-04-07 23:08:58

他们在屏幕外。这是一个固定的：http://jsfiddle.net/minitech/g42vq/3/ – Ryan 2012-04-07 23:16:33

可以使用::before伪元素阻止开箱阴影的一面。这并不完美，但它可能足以满足您的情况。 Here's the updated jsFiddle.

#bulb-bottom:before { 
    background-color: #E5F7A3; 
    content: ''; 
    display: block; 
    height: 30px; 
    margin: 0 auto; 
    position: relative; 
    top: -10px; 
    width: 140px; 
}

来源

2012-04-07 23:22:40 Ryan

这很好。谢谢。 – Connor 2012-04-07 23:26:06

只有三面的箱影

回答

相关问题