Question

我尝试根据此图片创建一个框：http://i.imgur.com/eTa6poY.png

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

......但边界似乎仍然有点像。我错过了什么？

Answer 1

修改 box-shadow 值设置h-shadow 2px ，v-shadow 2px ，模糊 10px 传播 0px

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

box-shadow语法

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

HTML code

<!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;
}

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

CSS box-shadow属性调整

3 个答案:

box-shadow语法

HTML code

CSS代码

演示jsBin