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

Question

我正试图在下面制作这样的阴影，但我不知道如何在css中制作这样的阴影。任何人都可以帮我制作这种风格吗？

Answer 1

您可以尝试使用负框展开阴影距离：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或者看一下这些例子：https://paulund.co.uk/learn-css-box-shadow。

Answer 2

使用此代码，它可能对您有帮助..

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;