Как сделать вставку с тенями только слева, снизу, справа - не сверху?

Question

У меня есть следующий стиль вставки box-shadow css3:

box-shadow: inset 0 0 10px 0 rgba(255, 255, 255, 1);

Стиль вставки появляется на всех 4 сторонах рамки, но я не хочу стилизацию сверху.Как удалить стили сверху, но оставить стили слева, снизу, справа?

Спасибо

Answer 1

Это то, что вы хотите:

.right-left-bottom-shadow {
    box-shadow: 5px 0 5px -5px #CCC, 0 5px 5px -5px #CCC, -5px 0 5px -5px #CCC;
}

Первый слева, второй снизу и последняя тень для правой стороны. Это выглядит очень хорошо, если ваша граница имеет цвет #CCC.

Answer 2

Пока вы не можете сделать это с помощью box-shadow, но вы можете комбинировать box-shadow с другими возможностями, такими как overflow: hidden. Например, вы можете выдвинуть верхнюю тень за пределы родительского элемента и скрыть эту часть с помощью overflow: hidden.

См. Эту демонстрацию: http://jsfiddle.net/CatChen/Fty2N/3/

Answer 3

Нет метода CSS, который я знаю для этого, но следующее может быть обходным решением (не идеальное решение)

    <div id="mydiv">
       <div class="workaround"></div>
    </div>

CSS

   #mydiv { 
     background-color:#f00;
     height:100px;
     width:100px;
     box-shadow: inset 0 0 10px 0 rgba(255, 255, 255, 1);
     padding:0 2px;
  }
 #mydiv .workaround {
    background-color:#f00;
    width:100%;
    height:10px;
 }

Check Fiddle http://jsfiddle.net/bZF48/17/