Как вы получаете тень от CSS-вставки? - PullRequest
Новая
       17

Как вы получаете тень от CSS-вставки?

5 голосов
/ 27 марта 2012

У меня есть список: 

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Citrus</li>
</ul>

Когда я помещаю цвет фона на узлы <li>, тень от блока (вставка), которая находится на узле <ul>, будет скрыта.Есть ли способ, которым я могу получить внутреннюю тень <ul> на переднем плане, чтобы она перекрывала цвет фона узлов <li>?

ПО ЗАПРОСУ ЗДЕСЬ ОБРАЗЕЦ: http://jsfiddle.net/JbAEL/ Наведите указатель мыши на предметы, и вы увидите, что красный цвет фона перекрывает внутреннюю тень, удаляя эффект.

Ответы [ 3 ]

3 голосов
/ 27 марта 2012

Говоря о грязном подходе, так как свойства foreground нет;) Я решил сделать относительный узел UL, добавив его с абсолютным узлом div, который несет внутреннюю тень.

Для рабочей версии: http://jsfiddle.net/JbAEL/14/

2 голосов
/ 27 марта 2012

HTML и CSS опираются на строгий набор определенной логики и, к сожалению, не имеют возможности упорядочить через z-index содержимое элемента и его фон независимо друг от друга и переплетать их с различными элементами (насколько я понимаю).я в курсе).

Вот один из предложенных методов, он не самый идеальный из решений, но иногда нарушение правил влечет за собой загрязнение.Примените тень к каждому из ваших li элементов и сдвиньте тень в зависимости от того, какой элемент находится в списке: верх, низ или любой элемент между ними.

HTML 

<ul>
    <li><div>Elephant</div></li>
    <li><div>Monkey</div></li>
    <li><div>Snake</div></li>
    <li><div>Zebra</div></li>
</ul>

CSS 

li
{
    overflow:hidden; height:30px;
}

li div /* middle items (default) */
{
    box-shadow                : inset 0px 0px 10px #000000;
    -ms-box-shadow            : inset 0px 0px 10px #000000;
    -moz-box-shadow            : inset 0px 0px 10px #000000;
    -webkit-box-shadow        : inset 0px 0px 10px #000000;
    line-height:30px; height:30px; margin-top:-30px; padding:30px 10px;
}

li:first-child div /* top item */
{
    margin-top:0; padding-top:0; padding-bottom:60px;
}

li:last-child div /* bottom item */
{
    margin-top:-60px; padding-top:60px; padding-bottom:0;
}

Полный код и демонстрацию вы можете увидеть на следующем jsFiddle , и, похоже, он отлично работает в Firefox 11 и IE9, но не может поручиться за другие браузеры.

1 голос
/ 27 марта 2012

background-color из ваших li s падает поверх теней.Если вы хотите сохранить тень, вы можете сделать цвет фона немного прозрачным.Попробуйте изменить background-color:red на background-color: rgba(255,0,0,0.1) скажем, где последнее значение - непрозрачность.При этом сохраняется вставка box-shadow, но наложение цвета станет немного бледным.

...