如何創建類似於bootstrap但更深入的CSS“井”效果？

Question

我想在我的頁面上創建一個井區，使該區域看起來像是在頁面下方幾個像素。 我的頁面目前有白色背景和＃F5F5F5井區。

我看了很好的twitter 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 well示例並復制“.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> 

Answer 3

將bootstrap的boxshadow更改為：

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

看這里的例子： http ： //jsfiddle.net/swm53ran/199/

前兩個插入參數是側面的陰影，然后是頂部和底部