Question

我正试图在我元素的所有四个方面获得box-shadow。

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

Answer 1

如果你再搜索一下这个，你就会马上找到答案。

box-shadow属性语法是以下内容：

box-shadow：水平偏移|垂直偏移|蓝色|传播|颜色;

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

没有抵消。
你喜欢模糊。

此处传播是关键，将10px设置为所有方面的传播均值5px，基本上是每个方面的一半。

＆＃13;

* {
  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;
}

＆＃13;

<div></div>

＆＃13;

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

Answer 2

尝试使用此5px指定阴影的模糊距离，而10px指定阴影的水平和垂直阴影。您可以查看此链接以获取更多信息https://www.w3schools.com/css/css3_shadows.asp

＆＃13;

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

＆＃13;

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

＆＃13;

或

你可以这样修改你的 box-shadow: 4px 4px 5px grey

Answer 3

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

Answer 4

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

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>

CSS：四边的盒子阴影，带有模糊效果

4 个答案: