CSS box-shadow属性调整

Question

我正在尝试基于此图像创建一个框： http : //i.imgur.com/eTa6poY.png

到目前为止，这是我所拥有的： http : //jsbin.com/qiwaq/1/edit

...但是边界似乎仍然有点。 我想念什么？

Answer 1

修改box-shadow值集h-shadow 2px ，v-shadow 2px ，blur 10px和散布0px

 box-shadow: 2px 2px 10px 0px rgb(41, 41, 41);

框阴影语法

 box-shadow: h-shadow v-shadow blur spread color;

HTML代码

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8">
   <title>CSS Box</title>
  </head>
  <body>
   <div class="the-box">
   </div>
  </body>
</html>

CSS代码

.the-box {
   background-color: rgb(244, 244, 244);
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 10px 0px rgb(41, 41, 41);
   width: 518px;
   height: 330px;
   margin-top: 10%;
   margin-left: auto;
   margin-right: auto;

}

演示jsBin

Answer 2

.the-box {
  background-color: rgb(244, 244, 244);
  border-radius: 10px 10px 10px 10px;
  box-shadow: 1px 1px 5px rgb(41, 41, 41);
  box-shadow: 2px 3px 6px rgb(41, 41, 41);
  width: 518px;
  height: 330px;
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
}

这是你想要的吗？

Answer 3

您必须稍微使用box-shadow属性。

这是您发布的图片附近的CSS。

.the-box {
  background-color: rgb(244, 244, 244);
  border-radius: 10px 10px 10px 10px;
  box-shadow: 2px 2px 5px 0px rgb(41, 41, 41);
  width: 518px;
  height: 330px;
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
}

这是演示。 http://jsbin.com/sefulaxo/1/edit