CSS:四个边上的框阴影具有模糊效果

Question

我试图在我的元素的所有 4 个边上获得 box-shadow。

我试过 box-shadow: 4px 4px 4px 4px 5px grey 但它不起作用。似乎也没有专门设置 box-shadow 模糊的规则。

Answer 1

如果您在谷歌上多搜索一下，您会立即找到答案。

box-shadow 属性语法如下:

box-shadow : horizontal offset | vertical offset | blur | spread | 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>

此外，如果您想要自定义，您始终定义多个用逗号分隔的阴影。