Запретить показ теней на определенной стороне

Ответ 1

Как я уже говорил в связанном с этим вопросе, решение этой проблемы либо очень неясно, либо невозможно в современной технологии. Слишком плохо, что нет никакого способа добиться этого, поскольку это обычная тема в веб-дизайне.

Я прибегал к использованию тени png, поскольку он кажется единственным разумным решением.

Спасибо за все ваши предложения.

Ответ 2

Существует четвертое расстояние, которое вы можете определить, называемое смещением смещения, которое перемещает тень на всех 4 сторонах. Поэтому, если вы установите это на отрицательное значение расстояния размытия, это сдвинет тень внутрь на то же расстояние, что и размытие, которое увеличивает тень наружу, эффективно скрывая ее. Конечно, это также сдвинет тень внутрь на той стороне, которую вы хотите, чтобы она появилась, поэтому вам нужно увеличить смещение на расстояние размытия, чтобы отменить это. то есть.

box-shadow: (horizontal + blur) 0px (blur) (-blur) color;

Итак, в вашем примере:

box-shadow: -8px 0px 5px -5px rgba(0,0,0,.8), 8px 0px 5px -5px rgba(0,0,0,.8);

Ответ 3

Вы также можете использовать clip: rect (0px, 210px, 200px, -10px);

К сожалению, я никогда не мог найти способ заставить его работать с коробкой с гибким размером.

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

clip: rect (0px, 1000px, 1000px, -10px);/* Снять верхнюю часть тени окна */

#box{
    box-shadow:             0px 0px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow:     0px 0px 10px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
    clip:rect(0px, 210px, 200px, -10px); /* Clip the top and bottom of the box-shadow off */
    width:200px;
    height: 200px;
    position: absolute;
    top:50px;
    left:50px;
    background:#eee;
}

Ответ 4

Существует, но он довольно хрупкий.

Используя следующий xhtml:

<div id="wrap">

 <div id="content">

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales justo nec mauris aliquam vitae feugiat magna congue. Morbi dignissim volutpat dui id porttitor. Donec auctor feugiat dolor, at varius magna rhoncus sed. Vivamus a odio urna, iaculis dignissim lectus. Integer aliquam felis eu sapien vestibulum ornare. Vivamus nec euismod sapien. Mauris quis eros ligula, sed pulvinar sem. Aenean sodales tempor malesuada. Aliquam erat volutpat. Aenean vel eros velit, et porttitor elit. Phasellus volutpat blandit quam eu fringilla. Integer ornare convallis tincidunt. Suspendisse commodo iaculis est vulputate volutpat. Donec at massa arcu. Sed sit amet commodo mauris. Aliquam erat volutpat. Integer eu augue vel erat euismod volutpat eu vel massa. Curabitur id erat vitae nisi imperdiet scelerisque id ut arcu. Quisque commodo dolor vitae erat imperdiet consectetur.</p>

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales justo nec mauris aliquam vitae feugiat magna congue. Morbi dignissim volutpat dui id porttitor. Donec auctor feugiat dolor, at varius magna rhoncus sed. Vivamus a odio urna, iaculis dignissim lectus. Integer aliquam felis eu sapien vestibulum ornare. Vivamus nec euismod sapien. Mauris quis eros ligula, sed pulvinar sem. Aenean sodales tempor malesuada. Aliquam erat volutpat. Aenean vel eros velit, et porttitor elit. Phasellus volutpat blandit quam eu fringilla. Integer ornare convallis tincidunt. Suspendisse commodo iaculis est vulputate volutpat. Donec at massa arcu. Sed sit amet commodo mauris. Aliquam erat volutpat. Integer eu augue vel erat euismod volutpat eu vel massa. Curabitur id erat vitae nisi imperdiet scelerisque id ut arcu. Quisque commodo dolor vitae erat imperdiet consectetur.</p>

 </div>

</div>

И следующий css:

#wrap {width: 70%;
 margin: 1em auto;
 overflow: hidden;
 overflow-x: visible;
 }

#content
 {width: 90%;
 margin: 0 auto;
 -moz-box-shadow: 0 0 1em #ccc;
 -webkit-box-shadow: 0 0 1em #ccc;
 }

#content p
 {overflow-y: hidden;
 padding: 0.5em 0;
 }

(Живая демонстрация расположена здесь: http://davidrhysthomas.co.uk/so/shadows.html.

Хрупкость ползет, если вы добавляете поля в содержащиеся элементы (особенно элементы <p>, поэтому я использовал padding). Но, в значительной степени, примените -moz-box-shadow (и/или -webkit-box-shadow) к div #content и используйте #wrap div для клипа тени, используя overflow-y: hidden;, это, конечно, делает его еще более хрупким из-за количества браузеров, которые уважают overflow-y.

С другой стороны, браузеры, которые интерпретируют box-shadow более или менее определенно имеют дело с overflow-y.

Ответ 5

Способ сделать это - поставить поле с тенью под div, у которого переполнение установлено на "скрытый". Например, чтобы создать тень вокруг окна, которое появляется только слева, сверху и справа:

CSS

#container {
    height: 101px;
    overflow: hidden;
    padding: 5px 5px 0;
    width: 105px;
}
#shadow-box {
   border:1px solid #aaa;
   width:100px;
   height:100px;
   box-shadow:0 0 4px 1px #666;
}

HTML:

<div id="container">
   <div id="shadow-box"></div>
<div>

Дисплей:

Вы можете отрегулировать дополнение и размер # контейнера для клипа, подходящего для ваших нужд. В этом примере я обрезаю нижнюю границу # shadow-box.

Ответ 6

У меня есть 2 возможных решения, которые дают ровно желаемый эффект: "нормальная" тень окна на некоторых ребрах и ничего на других ребрах. Многие из решений, перечисленных в этом и других S.O. вопросы приводят к теням, которые "рассеиваются", когда они приближаются к краю, который не имеет тени, когда я действительно считаю, что большинство людей хотят чистого отсечения.

Однако оба решения имеют оговорки.

Решение 1: клип-путь (экспериментальный)

Если вы хотите использовать экспериментальную технологию только с частичной поддержкой, вы можете использовать свойство clip-path.

В вашем случае вы должны использовать clip-path: inset(px px px px);, где значения пикселей вычисляются из соответствующего края (см. ниже).

#container {
    box-shadow: 0 0 5px rgba(0,0,0,0.8);
    clip-path: inset(0px -5px 0px -5px);
}

Это закроет div в вопросе:

• 0 пикселей сверху
• 5 пикселей за пределами правого края (для включения тени)
• 0 пикселей снизу
• 5 пикселей за пределами левого края (для включения тени)

Обратите внимание, что между значениями пикселей не требуются никакие запятые.

Абсолютное позиционирование не требуется, и размер div может быть гибким.

Решение 2: клип (устаревший)

Если

• вы хотели установить position: absolute в вопросе div
• И вы знаете размеры div
• ИЛИ вы не знаете размеры div, но вы готовы удалите только верхнюю и/или левую тени

... вы можете использовать свойство устаревшее clip.

Вам нужно будет использовать clip: rect(px, px, px, px);, где значения пикселей вычисляются в левом верхнем углу. Я использовал его следующим образом, чтобы отключить верхнюю коробку-тень, но сохранить нижнюю и боковую стороны:

#container {
    position: absolute;
    box-shadow: 0 0 5px rgba(0,0,0,0.8);
    width: 100px;
    height: 100px;
    clip: rect(0px, 105px, 100px, -5px);
}

Вышеупомянутый снимет верхний и нижний тени окна, оставив 5px левую и правую поля теней. Обратите внимание, что размер div должен быть известен.

Если размер div неизвестен, этот метод будет работать только для клипа верхней и левой тени, используя что-то вроде clip: rect(0, 3000px, 3000px, 0); (обратите внимание на массивное значение для правого и нижнего значений, чтобы разрешить div должен быть любого размера).

Ответ 7

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

box-shadow: #888 3px 0px 2px, #888 -3px 0px 2px;