你如何复制这种盒子阴影效果？

Question

这是我在CSS的第一年，我正试图复制我在Udemy上发现的这种盒子阴影效果：

我正在尽力复制这种效果，这就是我得到的壁橱：

#box {
  -webkit-box-shadow: 3px 14px 14px -11px rgba(245,245,245,1);
-moz-box-shadow: 3px 14px 14px -11px rgba(245,245,245,1);
box-shadow: 3px 14px 14px -11px rgba(245,245,245,1);
  width: 50px;
  height: 50px;
  background: white;
  }

body {
  background: black;
  
  }

<div id='box'> Hi </div>

你将如何实现这种盒子阴影效果？

谢谢！我解决了这个问题。事后，我发现了Udemy如何解决这个问题：

#A_16 {
    bottom: 0px;
    box-sizing: border-box;
    color: rgb(73, 133, 184);
    display: block;
    height: 34px;
    position: absolute;
    text-decoration: none;
    width: 358px;
    column-rule-color: rgb(73, 133, 184);
    perspective-origin: 179px 17px;
    transform-origin: 179px 17px;
    background: rgba(0, 0, 0, 0) linear-gradient(rgba(244, 244, 244, 0), rgba(244, 244, 244, 0.952941), rgb(244, 244, 244)) repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(73, 133, 184);
    font: normal normal bold normal 15px / 24px 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    outline: rgb(73, 133, 184) none 0px;
    padding: 0px 0px 10px 20px;
}

Answer 1

box-shadow属性支持名为＆＃34; inset＆＃34;的关键字。用于盒子内的盒子阴影。例如。 box-shadow: inset 0 -10px 5px 5px hsl(0, 0%, 90%);

（顺便说一句，不需要前缀，请参阅http://caniuse.com/#feat=css-boxshadow）

然而，效果更可能是线性渐变背景效果，其中元素绝对位于底部但覆盖剪切的内容。

＆＃13;

＆＃13;

.box {
    position: relative;
    height: 5.5em;
    overflow: hidden;
    border: 1px solid #222;
}

.box footer {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    padding-top: 0.5em;
    background: linear-gradient(0deg, #eee 80%, transparent 100%);
}

＆＃13;

<div class="box">
    Lorem<br>
    pork<br>
    ipsum<br>
    bacon
    <footer>READ MORE</footer>
</div>

＆＃13;

＆＃13;

＆＃13;