如何創建一個小於元素寬度的居中圓形陰影？

Question

我想在下面做這樣的陰影，但我不知道如何在CSS中製作陰影。任何人都可以幫助我做出這種風格嗎？

Answer 1

你可以用這樣的負面箱蔓延的陰影距離嘗試：

.item { 
 
    height: 30px; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
    box-shadow: 0 8px 6px -6px black; 
 
}

<div class="item"> </div>

還是來看看這些例子：https://paulund.co.uk/learn-css-box-shadow。

Answer 2

使用此代碼，它可以幫助你..

.jumbotron { 
 
    height: 30px; 
 
    width: 100%; 
 
    box-shadow: 0px 5px 15px #2C3E50; 
 
}

<div class="container"> 
 
    <br> 
 
    <div class="jumbotron"> 
 
    <p> asdfgggggggggggggggggggggggggggggggggggggggg</p> 
 
    </div> 
 
</div>