如何创建一个小于元素宽度的居中圆形阴影？

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>