CSS: box-shadow 四边模糊效果

Question

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

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

模糊的规则

Answer 1

试试这个 5px 指定阴影的模糊距离，而 10px 指定框阴影的水平和垂直阴影。您可以查看此 link 了解更多信息 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

Answer 2

您对 box-shadow 属性有额外的价值。这有效：box-shadow: 4px 4px 4px 5px grey

Answer 3

要在您的元素的所有边上获得框阴影，您需要：

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>

Answer 4

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

box-shadow 属性语法是休闲的：

box-shadow : horizontal offset | vertical offset | blur | spread | color ;

所以你想要它的各个方面意味着：

没有抵消。
随意模糊。

此处的传播是关键，将传播设置为 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>

另外，如果你想自定义，你总是定义多个用逗号分隔的阴影。

CSS: box-shadow 四边模糊效果

CSS: box-shadow on four sides with blur effect

css

box-shadow