Встроенная тень Google Chrome не работает

Я пытаюсь применить встроенную тень к элементу thead моей таблицы. Он работает в FireFox, но не в Chrome и Safari.

http://jsfiddle.net/jACGx/2/

tbody {
-webkit-box-shadow: 0 0px 5px rgba(180,180,180,1) inset; 
-moz-box-shadow:0 0px 5px rgba(180,180,180,1) inset;
box-shadow: 0 0px 5px rgba(180,180,180,1) inset; 
}

Пожалуйста посоветуй!


google-chrome css shadow
person mikek    schedule 31.08.2012    source источник
comment
Мое решение stackoverflow.com/a/17183690/567854. Надеюсь это поможет :)   -  person Ijas Ameenudeen    schedule 19.06.2013

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте применить тень к td:

td{
-webkit-box-shadow: 0 0px 5px rgba(180,180,180,1) inset; 
-moz-box-shadow:0 0px 5px rgba(180,180,180,1) inset;
box-shadow: 0 0px 5px rgba(180,180,180,1) inset; 
}

Это тот эффект, который вы ищете?

person meub    schedule 31.08.2012
comment
Не совсем, я хочу, чтобы ‹tbody› был затенен. Вот что я вижу в FF: i.tinyuploads.com/bOy2Y2.png Итак, я хочу чтобы получить тот же эффект в Chrome и Safari... - person mikek; 31.08.2012
comment
Попробуйте следующее: jsfiddle.net/meub/jKndu Я добавил display: block; к стилю таблицы и удалил tr:nth-child (четный) и (нечетный) цвета фона. Они ломают вложенную тень в хроме. - person meub; 31.08.2012
comment
Вы можете попробовать использовать opacity: 70; или прозрачное повторяющееся фоновое изображение в этих четных рядах, чтобы вставленная тень просвечивала... - person meub; 31.08.2012
comment
Если вы поместите display:block в tbody, это будет так же, как если бы вы создали вторую таблицу без box-shadow вместо thead. В любом случае вы теряете одну из самых важных функций таблиц - авторазмер. - person Mroz; 16.04.2013