Граница дочернего элемента за вставкой-тени родителя

Question

У меня есть DIV с внутренним A -tags. DIV имеет вложенную тень на верхней границе, каждый внутренний тег A имеет правую границу. Было бы намного лучше, если бы A-граница была за тенью, но по умолчанию она была сверху.

Пожалуйста, посмотрите мой jsFiddle. http://jsfiddle.net/X7475/

Любые идеи приветствуются.

Решение:

Я сделал это без дополнительного элемента с помощью CSS: прежде, чем псевдо-элемент, как это:

.post-сноска: до { -moz-box-проклейки: границы коробки; box-shadow: 0 7px 7px -7px # 000000 вставка; содержание: ""; дисплей: блок; высота: 7px; переполнение: скрыто; позиция: абсолютная; ширина: 100%; z-index: 1; }

Fiddle: http://jsfiddle.net/X7475/4/

Конечно, это действительно пиксель переходит к его лучшему, но я все еще думаю, что стоит визуального эффекта.

Answer 1

Если вы можете поставить под угрозой 10px из верхней части интерактивных площадей a тегов, здесь есть обходной путь, чтобы достичь того, что вам нужно:

Демо:http://jsfiddle.net/X7475/3/

HTML:

<div class="post-footer"> 
    <div class="topShadow"></div> 
    <div class="buttons"> 
     <a>7</a> 
     <a>3w</a> 
     <a>Raphael</a> 
     <a>229</a> 
    </div> 
</div> 

CSS:

.post-footer { 
    background: none repeat scroll 0 0 #323232; 
    height: 40px; 
    text-align: right; 
    z-index: 9; 
    position: relative; 
} 
.topShadow { 
    position:absolute; 
    top: 0; 
    left: 0; 
    width:100%; 
    height:10px; 
    border-top: medium none; 
    box-shadow: 0 10px 10px -7px #000000 inset; 
    z-index:1; 
} 
.post-footer a { 
    border-right: 1px solid #7E7E7E; 
    color: #D3D3D3; 
    float: left; 
    font-size: 0.8em; 
    padding: 12px 17px; 
    position: relative; 
} 
a:hover { 
    background-color:#f00; 
} 

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

Answer 2

Одним из решений является установка элемента выше и установка тени на него. Например: http://jsfiddle.net/NAv4Q/43/

Таким образом, вы не блокируете доступ к любой части кнопок ссылки. Недостатком является то, что вам нужно освободить место для дополнительного элемента. (Не проблема, если у вас уже есть элемент.)

Элемент должен быть как минимум выше, чем тень, иначе тень станет слабее (по крайней мере, в Firefox).

<div class="shadow"></div> 
<div class="post-footer"> 
    <div class="buttons"> 
     <a>7</a> 
     <a>3w</a> 
     <a>Raphael</a> 
     <a>229</a> 
    </div> 
</div> 

И CSS:

.post-footer { 
background: none repeat scroll 0 0 #323232; 
height: 3.2em; 
text-align: right; 
z-index: 9; 
position: relative; 
font-size: 0.8em; 
} 

.post-footer a { 
border-right: 1px solid #7E7E7E; 
color: #D3D3D3; 
float: left; 
line-height: 3.2em; 
padding: 0 1.5em; 
position: relative; 
} 

.shadow { 
height: 12px; 
position: relative; 
z-index: 10; 
box-shadow: 0 12px 9px -2px #000; 
} 

a:hover { background: rgba(100,100,255,0.3); }