Зеркальная левая / правая граница div, не использующая псевдоэлементы [duplicate]

Я не совсем уверен, что вы подразумеваете под «запускать мои собственные задачи cron вручную». В частности, для cron вам нужен доступ к crontab , который они могут контролировать, так как они являются их серверами. Если у вас есть другой способ сделать это, это, вероятно, будет хорошо, но имейте в виду, что ваше приложение не привязано к определенному серверу при работе под Heroku и что сервер будет изменяться между исполнениями.

Кроме того, если они не изменили его с тех пор, как я проверил последний раз, вы можете запускать ежедневные задания cron бесплатно, но почасовая оплата стоит $ 3 / мес.

EDIT: Да, ежедневные кроны Бесплатно. См. [D0] http://addons.heroku.com/ .

190
задан Jawad 17 August 2012 в 00:49
поделиться

12 ответов

ПРИМЕЧАНИЕ. Я предлагаю проверить @ ответ Хэмиша ниже; это не связано с несовершенной «маскировкой» в описанном здесь решении.


Вы можете приблизиться к нескольким теням; один для каждой стороны

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/YJDdp/

Изменить

Добавить еще 2 окна - тени для верхнего и нижнего фронта, чтобы замаскировать пропущенное.

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/LE6Lz/

235
ответ дан Community 15 August 2018 в 18:11
поделиться
  • 1
    ОК. Благодарю. Наверху немного тени; снизу, а возможно, из-за размытия / радиуса, но я думаю, вам придется жить с ним. – Jawad 17 August 2012 в 01:00
  • 2
    См. Мое обновление, которое маскирует кровотечение – deefour 17 August 2012 в 01:01
  • 3
    -1: тень не попадает в углы, они заканчиваются на несколько пикселей раньше. – Francisco Corrales Morales 12 August 2014 в 23:18
  • 4
    Я не могу поверить, что это решение так высоко оценено. Он расширяет объект в направлении сверху и снизу (применяя сплошную тень), поэтому он полезен только тогда, когда div находится на однородном фоне и может иметь пространство над и под ним. Очень ограничен и привязан к контекстному решению. Решение Хэмиша намного лучше и проще. – Ejaz 6 September 2014 в 01:49

NICE INSET SHADOW ON LEFT AND RIGHT SIDES ДЛЯ DIVS, ИЗОБРАЖЕНИЙ ИЛИ ВНУТРЕННИХ СОДЕРЖАНИЙ

Для красивой тени вставки в правой и левой сторонах на изображениях или любом другом содержимом используйте его таким образом

*** Z-index: -1 делает хороший трюк при показе изображений или внутренних объектов с помощью вложенных вложений

<html>
<div class="shadowcontainer">
<img src="https://www.google.es/images/srpr/logo11w.png" class="innercontent" style="with:100%"/>
</div>

<style>

.shadowcontainer{
display:inline-flex;
box-shadow: inset -40px 0px 30px -30px rgba(0,0,0,0.9),inset 40px 0px 30px -30px rgba(0,0,0,0.9);
}

.innercontent{
z-index:-1
}
</style>
</html>
0
ответ дан Alejandro Teixeira Muñoz 15 August 2018 в 18:11
поделиться

DEMO

Вы должны использовать несколько box-shadow;. Свойство вставки делает его красивым и внутри

div {
    box-shadow: inset 0 12px  15px -4px rgba(31, 73, 125, 0.8), inset 0 -12px  8px -4px rgba(31, 73, 125, 0.8);
    width: 100px;
    height: 100px;
    margin: 50px;
    background: white;
}
148
ответ дан atiquratik 15 August 2018 в 18:11
поделиться
  • 1
    Очень умно. Обратите внимание, что вашему :after также требуется top: 0. – Sprintstar 9 October 2013 в 12:07
  • 2
    Мне пришлось добавить display: inline-block в псевдо-классы, чтобы ваш пример работал. В целом: хорошее решение. +1 – Morpheus 6 March 2014 в 16:46
  • 3
    Я думаю, что это действительно должен быть правильный ответ, поскольку предоставленное решение действительно приводит к «коробке-тени слева» и «; только правые стороны ". Ответ, помеченный как правильный, все же приводит к теням сверху и снизу. – Luke 24 April 2014 в 03:38
  • 4
    Я думаю, что это должен был быть принятый ответ. Потому что один от @Deefour работает хорошо, поэтому верхний и нижний углы по бокам остаются пустыми. С другой стороны, это особенное решение просто идеально. – Rishabh Shah 21 June 2014 в 06:07
  • 5
    Для некоторых элементов необходимо использовать top: 0;, bottom: 0; и display: block; для достижения полной высоты, а не height: 100%;. – Pete 28 May 2015 в 21:07

Только для горизонтального, вы можете обмануть тень с помощью overflow в своем родительском div:

<div class="parent">
  <div class="box-shadow">content</div>
</div>

.parent{
  overflow:hidden;
}
.box-shadow{
  box-shadow: box-shadow: 0 5px 5px 0 #000;
}
0
ответ дан Bhojendra Nepal 15 August 2018 в 18:11
поделиться

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

0
ответ дан Garavani 15 August 2018 в 18:11
поделиться

Это отлично работает для всех браузеров:

-webkit-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
-moz-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
4
ответ дан Jibber 15 August 2018 в 18:11
поделиться
  • 1
    это не работает даже немного. Возможно, формат изменился, но это говорит о том, чтобы сдвинуть тень на 7 пикселей влево, на 0 пикселей вниз, размыть внешние 10 пикселей и увеличить размытие 0 пикселей. Разрыв: 17-кратное пятно слева, 10-кратное пятно сверху и снизу и 3-кратное пятно справа. Это то, что я получаю. – john ktejik 9 December 2013 в 06:27

Другой способ: overflow-y:hidden для родителя с дополнением.

#wrap {
    overflow-y: hidden;
    padding: 0 10px;
}
#wrap > div {
    width: 100px;
    height: 100px;
    box-shadow: 0 0 20px -5px red;
}

http://jsfiddle.net/qqx221c8/

3
ответ дан John Magnolia 15 August 2018 в 18:11
поделиться

Попробуйте это, он работает для меня:

    box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;
24
ответ дан krishna kinnera 15 August 2018 в 18:11
поделиться
  • 1
    когда есть два divs, углы не имеют границ. – Francisco Corrales Morales 12 August 2014 в 23:12

В некоторых ситуациях вы можете скрыть тень другим контейнером. Например, если есть DIV выше и ниже DIV с тенью, вы можете использовать position: relative; z-index: 1; на окружающих DIV.

0
ответ дан NateS 15 August 2018 в 18:11
поделиться

Классический подход: отрицательный распространение

CSS shadow использует 4 параметра: h-shadow, v-shadow, blur, spread:

box-shadow: 10px 0 8px -8px black;

v-shadow (истинная тень) установлена ​​в 0.

Параметр размытия добавляет эффект градиента, но добавляет также небольшую тень на вертикальные границы.

Отрицательный распространение уменьшает тень на всех границах: вы можете играть с ней, пытаясь удалить маленькую вертикальную тень, не затрагивая слишком много другой , (Это может быть просто для маленьких теней, например 5-10 px.)

Здесь пример скрипта .


Второй подход: Абсолютный div на стороне

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

Здесь скрипт с примером left-shadow.

<div id="container">
  <div class="shadow"></div>
</div>

.shadow{
    position:absolute;
    height: 100%;
    width: 4px;
    left:0px;
    top:0px;
    box-shadow: -4px 0 3px black;
}

В-третьих: Masking shadow

Если у вас есть фиксированный фон, вы можете скрыть эффект боковой тени двумя маскирующие тени, имеющие один и тот же цвет фона и размытие = 0, например:

box-shadow: 
    0 -6px white,          // Top Masking Shadow
    0 6px white,           // Bottom Masking Shadow
    7px 0 4px -3px black,  // Left-shadow
    -7px 0 4px -3px black; // Right-shadow

Я снова добавил отрицательный спред (-3px) к черной тени, поэтому он не растягивается дальше углы.

Здесь скрипт .

17
ответ дан T30 15 August 2018 в 18:11
поделиться
148
ответ дан atiquratik 5 September 2018 в 17:18
поделиться
0
ответ дан Valentin 5 September 2018 в 17:18
поделиться