如何创建类似于bootstrap但更深入的CSS"井"效果？

我想在我的页面上创建一个井区,使该区域看起来像是在页面下方几个像素.我的页面目前有白色背景和#F5F5F5井区.

我看了很好的twitter bootstrap:

http://getbootstrap.com/components/#wells

对我来说,至少这看起来并不好.也许是因为我知道后一版本的重点是创造一个平面效果.

有没有人有任何关于如何添加效果好的例子？

使用盒子阴影和明智的颜色选择,你可以很容易地看起来像井:

演示:

div {
  height: 100px;
  width: 200px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  box-shadow: inset 0 0 10px black, 0 0 10px black;
  padding: 10px;
  display: inline-block;
  margin: 15px;
  vertical-align: top;
  text-align: center;
}
html,
body {
  background: gray;
}
.second {
  box-shadow: inset 1px 1px 10px black, 0 0 30px black;
}
.third {
  box-shadow: inset 0px 0px 10px black, 0 0 20px black;
}
.forth {
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 0 30px black;
}

this is deep

I'm slightly different. But still look deep

Don't fall down me!

Do you, like, wells?

.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}

  Some Text

box-shadow: inset 2px 2px 1px rgba(0,0,0,.05);