Как применить box-shadow со всех четырех сторон?

84

Я пытаюсь применить со box-shadowвсех четырех сторон. У меня получилось только с двух сторон:

css box-shadow стрекоза
источник
2
CSS3please.com всегда полезен для такого рода вещей ...
sscirrus 09

Ответы:

144

Это из-за смещения x и y. Попробуй это:

-webkit-box-shadow: 0 0 10px #fff;
        box-shadow: 0 0 10px #fff;

edit (год спустя ..): Сделал ответ более кроссбраузерным, как просили в комментариях :)

Кстати: в настоящее время существует множество генераторов css3 .. css3.me , css3maker , css3generator и т. д.

Damb
источник
1
+1, потому что вы получили правильный ответ быстрее, хотя он выглядит лучше с меньшим радиусом и значением разброса.
30dot
1
Благодарю. Я смотрел на ваш первый ответ и подумал, что я неправильно понял вопрос :)
Damb
вам следует сделать свой ответ более кроссбраузерным.
Лукас,
Не знаю почему, но у меня это не работает. Когда я использую это, я не получаю тени коробки. Если я использую ответ, опубликованный @thirtydot, он работает. У вас должно быть размытие и распространение, если первые два значения равны 0. Это происходит в Chrome.
Чарльз Уильямс
1
@thirtydot - Вы правы, на более светлом фоне это видно. Но если ваш фон черный, вы его вообще не увидите. Так что я не должен говорить, что это не работает. Но это точно не видно без разворота, когда у вас черный фон, независимо от цвета тени блока. Даже с красным кажется, что ваша граница немного красная, но нет «видимой» тени блока. Так что, если у вас более светлый фон, я думаю, это решение подойдет. Для очень темного фона такое решение не надежно. jsfiddle.net/vkzd71rc vs jsfiddle.net/vkzd71rc/1
Чарльз Уильямс
35

См .: http://jsfiddle.net/thirtydot/cMNX2/8/

input {
    -webkit-box-shadow: 0 0 5px 2px #fff;
    -moz-box-shadow: 0 0 5px 2px #fff;
    box-shadow: 0 0 5px 2px #fff;
}
тридцать точек
источник
Я знаю, что означает каждое значение в тени блока с 3 значениями + цвет. что это за 4 значения ??
Dragonfly
1
Прочтите: developer.mozilla.org/En/CSS/Box-shadow - в частности, это «радиус распространения».
30dot 09
Создатель скрипки - MVP.
Terrance00
10

Выглядит круто.

-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
Налан Мадхесваран
источник
10

Просто, как этот код:

box-shadow: 0px 0px 2px 2px black; /*any color you want*/
Панкские
источник
5

Самое простое решение и самый легкий способ - добавить тень для всех четырех сторон. CSS

box-shadow: 0 0 2px 2px #ccc; /* with blur shadow*/
box-shadow: 0 0 0 2px #ccc; /* without blur shadow*/
Хузайф Сайед
источник
5

Понять синтаксис box-shadow и написать его соответствующим образом

box-shadow: h-offset v-offset blur spread color;

h-offset: Горизонтальное смещение тени. Положительное значение помещает тень в правую часть поля, отрицательное значение помещает тень в левую часть поля - Обязательно

v-offset: Вертикальное смещение тени. Положительное значение помещает тень под прямоугольник, отрицательное значение помещает тень над прямоугольником - обязательно

blur: радиус размытия (чем выше число, тем более размытой будет тень) - необязательно

color: Цвет тени - Необязательно

распространение: Радиус распространения. Положительное значение увеличивает размер тени, отрицательное значение уменьшает размер тени - необязательно

вставка: изменяет тень от внешней тени на внутреннюю - необязательно

box-shadow: 0 0 10px #999;

box-shadow лучше работает со спредом

box-shadow: 0 0 10px 8px #999;

используйте 'inset', чтобы применить тень внутри поля

box-shadow: 0 0 8px inset #999;
(or)
box-shadow: 0 0 8px 8px inset #999;

используйте rgba (красный, зеленый, синий альфа) для более эффективной настройки тени

box-shadow: 0 0 8px inset rgba(153, 153, 153, 0.8); 
(or)
box-shadow: 0 0 8px 8px inset rgba(153, 153, 153, 0.8);
Сешу Вуггина
источник
2

Я нашел сайт http://css-tricks.com/forums/topic/how-to-add-shadows-on-all-4-sides-of-a-block-with-css/ .

.allSides
{
    width:350px;height:200px;
    border: solid 1px #555;
    background-color: #eed;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
user3619130
источник
1
это уместно, как и другие ответы на этом сайте, но, поскольку вы стремитесь, я голосую за ваш ответ.
blueray
1

CSS3 box-shadow: 4-х сторонняя симметрия

  1. каждая сторона одного цвета

:root{
  --color: #f0f;
}

div {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 50px auto;
  width: 200px;
  height: 100px;
  background: #ccc;
}

.four-sides-with-same-color {
  box-shadow: 0px 0px 10px 5px var(--color);
}
<div class="four-sides-with-same-color"></div>
Развернуть фрагмент

  1. каждая сторона с разным цветом

:root{
  --color1: #00ff4e;
  --color2: #ff004e;
  --color3: #b716e6;
  --color4: #FF5722;
}

div {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 50px auto;
  width: 200px;
  height: 100px;
  background-color: rgba(255,255,0,0.7);
}

.four-sides-with-different-color {
  box-shadow: 
    10px 0px 5px 0px var(--color1),
    0px 10px 5px 0px var(--color2),
    -10px 0px 5px 0px var(--color3),
    0px -10px 5px 0px var(--color4);
}
<div class="four-sides-with-different-color"></div>
Развернуть фрагмент

скриншоты

реф.

https://css-tricks.com/almanac/properties/b/box-shadow/

https://www.cnblogs.com/xgqfrms/p/13264347.html

xgqfrms
источник
0

Используйте этот код CSS для всех четырех сторон: box-shadow: 0px 1px 7px 0px rgb (106, 111, 109);

Бал мукунд кумар
источник
0

Вы можете разные комбинации по следующей ссылке.
https://www.cssmatic.com/box-shadow

Нужные вам результаты могут быть достигнуты с помощью следующего CSS

-webkit-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
Ans
источник