如何創建類似於bootstap但更深的CSS「良好」效果？

我想在我的頁面上創建一個井區域，使區域看起來像是在頁面下方几個像素點。我的頁面目前有一個白色背景和一個＃F5F5F5井區域。如何創建類似於bootstap但更深的CSS「良好」效果？

我看着好了Twitter的引導：

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

至少對我來說，這並不像很好的。也許是因爲我知道後期版本的重點是創造一個平坦的效果。

有沒有人有任何如何添加工作效果的例子？

來源

2015-02-06 Alan2

使用嵌入框陰影會很好[請參閱此處的菜單]（http://codepen.io/jbutler483/pen/qERGOw） - 爲了達到這個效果，我們已經做了一段時間。這完全是關於着色和尺寸的選擇 – jbutler483 2015-02-06 13:48:53

使用框陰影的組合，和明智的顏色選擇，你可以讓事情看起來像井很容易：

演示：

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>

來源

2015-02-06 13:54:41 jbutler483

非常感謝花時間給出這樣一個很好的答案。我已經接受了答案。希望它不會結束。 – Alan2 2015-02-06 14:05:20

@Alan：沒問題。它更多的是關於盒子陰影使用的設計/價值/知識。 – jbutler483 2015-02-06 14:08:47

變化自舉盒的陰影很好：

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

看到這裏的例子：http://jsfiddle.net/swm53ran/199/

前兩個插圖參數都在兩側的陰影，然後頂部和底部

來源

2015-02-06 13:54:49 indubitablee

你可以簡單地檢查bootstrap well example和複製「好了」規則集

演示：

.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>

來源

2017-05-23 07:05:19

如何創建類似於bootstap但更深的CSS「良好」效果？

回答

相關問題