css - 你如何复制这个盒子阴影效果？

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 属性支持一个名为“inset”的关键字用于框内的box-shadow。例如。 box-shadow: inset 0 -10px 5px 5px hsl(0, 0%, 90%);

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

但是，效果更像是线性渐变背景效果，其中元素绝对位于底部但覆盖了裁剪的内容。

.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%);
}

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