Зеркальная левая / правая граница div, не использующая псевдоэлементы [duplicate]
Я не совсем уверен, что вы подразумеваете под «запускать мои собственные задачи cron вручную». В частности, для cron вам нужен доступ к crontab , который они могут контролировать, так как они являются их серверами. Если у вас есть другой способ сделать это, это, вероятно, будет хорошо, но имейте в виду, что ваше приложение не привязано к определенному серверу при работе под Heroku и что сервер будет изменяться между исполнениями.
Кроме того, если они не изменили его с тех пор, как я проверил последний раз, вы можете запускать ежедневные задания cron бесплатно, но почасовая оплата стоит $ 3 / мес.
EDIT: Да, ежедневные кроны Бесплатно. См. [D0] http://addons.heroku.com/ .
12 ответов
ПРИМЕЧАНИЕ. Я предлагаю проверить @ ответ Хэмиша ниже; это не связано с несовершенной «маскировкой» в описанном здесь решении.
Вы можете приблизиться к нескольким теням; один для каждой стороны
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);Изменить
Добавить еще 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);
-
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>
Вы должны использовать несколько 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;
}
-
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;
}
Другая идея может заключаться в создании темного размытого псевдоэлемента в конечном итоге с прозрачностью для имитации тени. Сделайте это со слегка меньшей высотой и большей шириной, например.
Это отлично работает для всех браузеров:
-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;
-
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;
}
Попробуйте это, он работает для меня:
box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;
-
1
В некоторых ситуациях вы можете скрыть тень другим контейнером. Например, если есть DIV выше и ниже DIV с тенью, вы можете использовать position: relative; z-index: 1; на окружающих DIV.
Классический подход: отрицательный распространение
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) к черной тени, поэтому он не растягивается дальше углы.
Здесь скрипт .