在背景前面直观地创建一个框

Question

我试图实现像shown in the picture below这样的容器来保存我的博文。在背景前面的白色容器。

我虽然如果我将背景颜色改为白色，它看起来就像它。但是，它没有奏效，因为看起来背景和我的白色boz都是同一级别。

我如何创建一个框来保存我的博文，看起来像是在背景前？

（我正在开发博客网页）

Answer 1

申请＆＃34; hover＆＃34;效果，您可以使用box-shadow直观地显示背景前的元素（通过z-index）。 JSBin

#bg {
  background-color: #ddd;
  width: 130px;
  height: 130px;
  padding: 20px;
}

#fr {
  background-color: #eee;
  width: 130px;
  height: 130px;
  box-shadow: 2px 2px 5px #454545;
  border-radius: 500px
}

Answer 2

可能有许多设计可用于此目的。但我建议您使用内联css的border和border-radius属性。这可能会提升您的内容。另一个内联css属性为border-style，您可以使用该属性定义样式，例如 - dashed，solid，double，groove，ridge，{ {1}}，inset。

这一切都取决于你想要使用的。如果您需要一个例子，请告诉我。我希望你明白。

修改

outset

Answer 3

您应该专门为博客帖子使用另一个div，以便您可以轻松设置样式。

This看起来应该是一个非常简单的形式。

示例HTML内容：

<div id="main-container"> <!-- A main container div, for the whole webpage -->
  <h3>Posts</h3>
  <div class="post">
    <h4>Post Title</h4>
    Blog post text here, Blog post text hereBlog post text hereBlog post text hereBlog post text hereBlog post text hereBlog post text hereBlog post text hereBlog post text hereBlog post text hereBlog post text hereBlog post text hereBlog post text hereBlog post text here
  </div>
</div>

这就是您的CSS代码的样子：

#main-container {
  background-color: lightGray;
}

.post {
  margin: 5em;
  margin-bottom: 2em;
  background-color: white;
  border: 2px solid gray;
  text-align: center;
  box-shadow: 0px 0px 7px gray; 
}

.post h4 {
  text-align: center;
}

你需要有框阴影才能启用这种类似3D的效果。 我建议使用多框阴影，你可以阅读更多here。