如何创建CSS的“井"图?效果类似于自举，但更深入?

问题描述：

我想在页面上创建一个良好的区域，使该区域看起来比页面下方小一些像素.我的页面当前具有白色背景和#F5F5F5孔区域.

I would like to create a well area on my page that makes the area look like it is a little bit below the page by a few pixels. My page currently has a white background and a #F5F5F5 well area.

我在Twitter引导程序上看得很好:

I looked at the well for twitter bootstrap:

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

至少对我而言，这看起来并不好.也许是因为我知道以后的版本的重点是创建平面效果.

For me at least this does not look like well at all. Maybe it is because I know the focus of the later version is to create a flat effect.

有人能举例说明我如何增加效果吗?

Does anyone have any examples of how I could add a working well effect?

答

结合使用盒子阴影和明智的颜色选择，您可以很轻松地使事情看起来像井子:

Using a combination of box shadows, and a sensible colour choice, you can make things look like wells quite easily:

演示:

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

<div>this is deep</div>

<div class="second">I'm slightly different. But still look deep</div>

<div class="third">Don't fall down me!</div>

<div class="forth">Do you, like, wells?</div>

如何创建CSS的“井"图?效果类似于自举，但更深入?

相关推荐