在CSS中添加阴影到边框

Question

到目前为止，我有这个：

body {
  width: 800px;
  background-color: white;
  border: 10px shadow black;   
  margin: 0 auto;
}

但我还想添加一个影子。

Answer 1

您可以使用CSS box-shadow 属性应用框阴影，例如：

box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.5);

这里有一个方便的盒子阴影生成器可以帮助你，因为你可以调整属性并获得视觉反馈：

https://www.cssmatic.com/box-shadow

Answer 2

对于影子：

box-shadow: 0 0 2px black;

对于边界：

border: 2px solid black;

如果你想让边框和阴影同时使用它们。

Answer 3

为body标记赋予阴影不是一个好主意，body是您网页的画布，在某个阶段您将看不到阴影。 以下是使用div代码的代码段。

.box {
  width: 50%;
  height:200px;
  background-color: white;
  box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.5);   
  margin: 0 auto;
}

<div class='box'>abc</div>