CSS：四边的框阴影具有模糊效果

Question

我试图box-shadow在我的元素的所有 4 个方面。

我试过了，box-shadow: 4px 4px 4px 4px 5px grey但它不起作用。似乎也没有专门设置box-shadow.

Answer 1

如果你在谷歌上搜索了更多，你会马上找到答案。

该box-shadow属性的语法是休耕：

box-shadow : 水平偏移 | 垂直偏移| 模糊 | 传播| 颜色 ;

所以你想要它在所有方面意味着：

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>

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