html - 背景在背景之上，周围的内容

Question

所以，我尝试了一些 html/css/js/jquery 编码，并且已经有几天一直在寻找答案。我试图制作一个干净的网站，并且基本上想知道如何做到这一点：

我惊人的绘画技巧试图解释的是如何在内容周围/背后做“边框/背景”。不是蓝白色背景，而是浅灰色背景。一直在尝试使用和使用 css 边框/宽度/高度等。但似乎无法让任何东西正常工作。就像它应该使用菜单栏自动缩放一样，如图所示。感谢任何输入。

Answer 1

尝试这个：

小提琴：http: //jsfiddle.net/CGqa5/1/

CSS

.outer{
width: 200px;
height: 200px;
background: #999999;
border-radius: 10px;
padding: 10px;
}
.inner{ 
width: 100%;
height: 100%;
background: #ffffff;
}

HTML

<div class="outer">
  <div class="inner">
    CONTENT
  </div>
</div>

Answer 2

使用 box-shadow 你只需要在你的 CSS 中添加一行！

box-shadow: 0px 0px 5px 5px #888888;

小提琴：http: //jsfiddle.net/3vVZQ/