박스 그림자가 3면에만 있음

나는 css3 상자 그림자가있는 두 개의 겹치는 div가 있습니다. 문제는 내가 Z- 인덱스를 설정할 때조차도 여전히 div의 상자 그림자 중 하나를 제거해야한다는 것입니다. 네거티브 스프레드와 0 값이 사용되는 경우를 보았지만 여기서는 효과가 없을 것이라고 생각합니다.박스 그림자가 3면에만 있음

내가 지금 가지고있는 코드는 다음과 같습니다 당신은 상자 그림자의 한쪽을 차단하기 위해 ::before 의사 요소를 사용할 수

#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

Here's the updated jsFiddle. 당신은 [jsFiddle] (http://jsfiddle.net/)를하시기 바랍니다 게시 할 수 있습니까? – Ryan

나는 이것을 http://jsfiddle.net/g42vq/2/에서 시작했으나 작동하지 않는다. ... – Connor

그들은 오프 스크린이었다. 고정 된 것이 있습니다 : http://jsfiddle.net/minitech/g42vq/3/ – Ryan

. 완벽하지는 않지만 상황에 따라 충분할 수 있습니다.

#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

박스 그림자가 3면에만 있음

답변

관련 문제