Одна пиксельная тень с трех сторон с использованием CSS3 box-shadow

Question

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

   -moz-box-shadow: 0 1px 1px   #c00
-webkit-box-shadow: 0 0   1px 0 #c00
        box-shadow: 0 0   1px 0 #c00

Answer 1

Попробуйте 3 тени, без размытия. http://jsfiddle.net/leaverou/8tgAp/1/

body {
    width: 300px;
    height: 200px;
    margin: 20px auto;

    -moz-box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00;
    -webkit-box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00;
    box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00;
}

Answer 2

Использование обычного объявления границы - это путь, но если - по какой-либо причине - вы не можете использовать рамку, тогда вы можете скрыть одну сторону тени с помощью псевдоселектора: before или: after.1001 *

Пример:

body {background-color: #000; color: #fff}

.module {
    height: 100px;
    width: 100px;
    background-color: #000;
    -moz-box-shadow: 0 0 2px #f00;
    -webkit-box-shadow: 0 0 2px #f00;
    box-shadow: 0 0 2px #f00;
}

.module:before {
  content: '';
  border-top: solid #000 1px;
  display: block;
  position: relative;
  top: -1px;
}

Вы можете увидеть это в действии здесь: http://jsfiddle.net/3nspR/