Коробка Тень только с 3 сторон

У меня есть два перекрывающих divs, у которых есть тени css3. Проблема в том, что даже когда я устанавливаю z-index, мне все равно нужно устранить одну из тэгов box div. Я видел случаи, когда используются отрицательные спрэды и нулевые значения, но я не думаю, что это сработало бы здесь.Коробка Тень только с 3 сторон

код у меня сейчас:

#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

Я начал этот http://jsfiddle.net/g42vq/2/, но он не работает ... – Connor

Они были вне экрана. Вот исправленный: http://jsfiddle.net/minitech/g42vq/3/ – Ryan

Вы можете использовать ::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

Коробка Тень только с 3 сторон

ответ

Смежные вопросы