CSS: box-shadow с четырех сторон с эффектом размытия - PullRequest
Новая
       29

CSS: box-shadow с четырех сторон с эффектом размытия

0 голосов
/ 24 мая 2018

Я пытаюсь получить box-shadow на всех 4 сторонах моего элемента.

Я пробовал box-shadow: 4px 4px 4px 4px 5px grey, но это не работает.Также, похоже, не существует правила для конкретной установки размытия box-shadow.

Ответы [ 4 ]

0 голосов
/ 25 мая 2018

Если бы вы немного погуглили, вы бы сразу нашли ответ.

Синтаксис свойства box-shadow следующий:

boxтень: горизонтальное смещение |вертикальное смещение |синий |распространение |color;

То есть, вы хотите, чтобы это было со всех сторон, означает:

  1. Без смещений.
  2. Размытие по вашему желанию.

Распределение здесь является ключом к этому, установив 10px для средства разбрасывания 5px со всех сторон, в основном половина будет на каждой лицевой стороне. 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  padding: 30px;
  margin: 30px;
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: orange;
  box-shadow: 0px 0px 10px 10px grey;
}
<div></div>

Также, если вы хотите настроить, вы всегда определяете несколько теней, разделенных запятой.

0 голосов
/ 24 мая 2018

У вас есть дополнительное значение для box-shadow свойства.Это работает: box-shadow: 4px 4px 4px 5px grey

0 голосов
/ 24 мая 2018

Чтобы получить тень от коробки со всех сторон вашего элемента, вам потребуется: 

div {
    width: 300px;
    height: 100px;
    padding: 15px;
    background-color: lawngreen;
    box-shadow: 0 0 20px black;
}
<div>All of my sides have a box-shadow!</div>
0 голосов
/ 24 мая 2018

Попробуйте вместо этого 5px указать расстояние размытия тени, в то время как 10px укажите горизонтальную и вертикальную тень рамки-тени.Вы можете проверить эту ссылку для получения дополнительной информации https://www.w3schools.com/css/css3_shadows.asp

div {
    width: 300px;
    height: 100px;
    padding: 15px;
    background-color: yellow;
    box-shadow: 10px 10px 5px grey;
}
<body>

<div>This is a div element with a box-shadow</div>

</body>

или

Вы можете изменить свой, например, так: box-shadow: 4px 4px 5px grey

...