Как избежать наложения тени в одну сторону в CSS3

Question

Как избежать наложения тени в одну сторону в CSS3

0

Я пытаюсь установить эффект тени для контента, и я могу его установить. Но я накладываюсь на смежный элемент, который нарушает внешний вид. Есть ли способ удалить эффект наложения для определенной области (в красном круге на изображении)? Просьба проверить образ образца ниже.

HTML:

<div id="container">
    <div id="table1">
        <table>
            <tr><td>AAA</td></tr>
            <tr><td>BBB</td></tr>
            <tr><td>CCC</td></tr>            
        </table>
    </div>
    <div id="table2"  class="Shadow">
        <table>
            <tr><td>aaa</td><td>eee</td></tr>
            <tr><td>bbb</td><td>fff</td></tr>
            <tr><td>ccc</td><td>ggg</td></tr>
            <tr><td>ddd</td><td>hhh</td></tr>
        </table>
    </div>
</div>

CSS:

#container {    
    position: relative;
}
table,td,tr{
    border:1px solid black;
}
#table1{    
    position: absolute;     
}
#table2{    
    position:absolute;
    background-color:pink;
    margin-left:40px;
}
.Shadow{
-webkit-box-shadow: 0 0 30px 9px #476FCC;
box-shadow: 0 0 30px 9px #476FCC;
}

Ссылка JS Fiddle: http://jsfiddle.net/5JYPm/13/

RGR 11 апр. 2014, в 14:54

Источник

0

Вы имеете в виду, что хотите удалить тень в красном круге?
King King 11 апр. 2014, в 12:04
0

@KingKing: да.
RGR 11 апр. 2014, в 12:05
0

@RanjithKumarGovarthanan - не может быть сделано. Однако вы можете расположить элемент, находящийся за тенью, таким образом, чтобы он был на вершине тени. Будет ли это удовлетворить ваши требования?
Adam 11 апр. 2014, в 12:05
0

@ Адам: Да .. я думаю, что это может удовлетворить мои требования. Благодарю.
RGR 11 апр. 2014, в 12:06
1

Тогда вот, пожалуйста, - jsfiddle.net/W7vjX . Это ваша точная скрипка, за исключением того, что к первой таблице добавлен цвет фона #fff и добавлен z-index.
Adam 11 апр. 2014, в 12:07

Показать ещё 3 комментария

Теги:

html

css

css3

twitter-bootstrap-3

4 ответа

Ещё вопросы

Вы имеете в виду, что хотите удалить тень в красном круге?
@RanjithKumarGovarthanan - не может быть сделано. Однако вы можете расположить элемент, находящийся за тенью, таким образом, чтобы он был на вершине тени. Будет ли это удовлетворить ваши требования?
@ Адам: Да .. я думаю, что это может удовлетворить мои требования. Благодарю.
Тогда вот, пожалуйста, - jsfiddle.net/W7vjX . Это ваша точная скрипка, за исключением того, что к первой таблице добавлен цвет фона #fff и добавлен z-index.

Mister Epic · Answer 1 · 2014-04-11T10-54-00.000Z

Я думаю, что самое близкое, что вы собираетесь получить, это укладка первой таблицы за секунду и обеспечение цвета фона на ней:

#table1{    
    position: absolute;     
    z-index:2;
    background-color:#fff;
}
#table2{    
    position:absolute;
    background-color:pink;
    margin-left:40px;
    z-index:1;
}

http://jsfiddle.net/5JYPm/16/

Великие умы думают одинаково. Это стоит +1!

Pete · Answer 2 · 2014-04-11T09-27-00.000Z

вам нужно изменить z-index таблиц, а затем добавить фоновый цвет в таблицу1

пример

Paulie_D · Answer 3 · 2014-04-11T09-49-00.000Z

Отрегулируйте тень справа от половины распространения?

.Shadow{
box-shadow: 15px 0 30px 0px #476FCC;
}

JSfiddle

sss999 · Answer 4 · 2014-04-11T10-50-00.000Z

<div id="table2" style="z-index:-1;" class="shadow">