我有一個簡單的引導程序網站,內容由陰影包圍。我試圖將左右陰影靠近窗口邊界,以使內容看起來不那麼緊湊。我不想增加陰影半徑,我只是想讓陰影邊放置在靠近左右邊界的位置。在不更改內容邊距的情況下減少Box-Shadow保證金
這裏是什麼樣子:Border is too close to content.
這裏是我的HTML:
<div class="dropshadow">
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</div>
</div>
這裏是我的CSS:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
.dropshadow {
display: table;
margin: 0 auto;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
}
當我嘗試添加填充或更換左, .dropshadow的右邊緣,我搞砸了內容的位置。我希望內容保持在原來的位置。我寧願保留它作爲display:table,除非你認爲有更好的東西。
這裏是提琴: https://jsfiddle.net/u1ph99pv/2/
確保你增加窗口寬度足夠大箱陰影出現,這不是在我的網站的一個問題,因爲我沒有在移動視圖中顯示它。
謝謝!你解決了我的問題,並閱讀我的想法!我不得不添加'margin:0 auto'並將顯示更改爲table以反轉自動左對齊,因爲建議使用inline-block,但沒有居中任何內容!所以我的心思全都放在桌子上,但我誤會了。謝謝你,你是天才天使半神人超級英雄級別99嚮導!!! –
不客氣! – vothaison