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

Question

我想在我的页面上创建一个井状区域，使该区域看起来比页面稍低几个像素。我的页面目前有一个白色背景和一个#F5F5F5 井区。

我看了推特井bootstrap:

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

至少对我来说，这看起来一点都不好。可能是因为知道后面版本的重点是打造平面效果吧。

有没有人有任何例子说明我可以如何添加工作良好的效果？

Answer 1

结合使用框阴影和合理的颜色选择，您可以很容易地使事物看起来像井：

演示：

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>

Answer 2

将 bootstrap 井的 boxshadow 更改为：

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

参见此处示例：http://jsfiddle.net/swm53ran/199/

前两个插入参数是侧面的阴影，然后是顶部和底部

Answer 3

您可以简单地检查 bootstrap well example 并复制“.well”规则集

演示:

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

<div class="well">
  Some Text
</div>

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

How can I create a CSS "well" effect similar to bootstrap but deeper?

html

css

twitter-bootstrap