CSS3 Box阴影到div的一半

Question

我想将盒子阴影应用到div的一半。我在谷歌搜索了很多但是失败了。 这是简单的盒子阴影的代码。

<style type="text/css">
    div{
        width: 200px;
        height: 200px;
        text-align: center;
        background-color: gray;
        margin: auto;
        font-size: 30px;
        box-shadow: 0 100px 5px 5px;
    }
</style>

<div>Sometimes by losing a battle you find a new way to win the war.</div>

已编码：

必需：

提前感谢...

Answer 1

您可以将box-shadow应用于其:after：pseudo-element来实现此目的。

＆＃13;

＆＃13;

div {
  width: 200px;
  height: 200px;
  text-align: center;
  background-color: gray;
  margin: auto;
  font-size: 30px;
  position: relative;
}
div:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 50%; /* Half of the original height */
  top: 0;
  left:0;
  box-shadow: 0 100px 5px 5px;
  z-index: -1;
}

＆＃13;

<div>Sometimes by losing a battle you find a new way to win the war.</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

有一种方法可以使用第二个div覆盖阴影。

这是一个codepen：https://codepen.io/bstookey/pen/gEeovj

<div class="shadowContainer">
    <div class="shadow"></div>
    <div class="shadowContent">
        <div class="containerSmall">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac consequat ligula. Aliquam finibus risus a rutrum volutpat. Donec tempus iaculis maximus. Ut scelerisque tortor in semper dictum. Fusce ullamcorper risus eget diam fermentum ultrices. Maecenas pharetra pellentesque urna, bibendum volutpat justo. Aliquam egestas odio quis purus ornare sollicitudin.

Etiam mattis orci id ante vehicula vehicula. Sed consequat interdum orci aliquet dapibus. Proin pharetra luctus pharetra. Sed iaculis nibh nulla, eu consectetur libero vulputate at. Interdum et malesuada fames ac ante ipsum primis in faucibus. In eu risus justo. Aliquam egestas risus mi, sit amet vehicula nibh lobortis rhoncus. Nullam justo justo, faucibus tristique aliquam a, tristique imperdiet tellus. Nulla facilisi.

Proin mauris libero, blandit nec risus eget, efficitur laoreet magna. Donec nulla sapien, laoreet mattis sem eu, ultrices luctus turpis. Donec sed leo nec nibh dignissim placerat auctor at ante. Nunc faucibus sit amet libero et luctus. Pellentesque non nulla scelerisque, sollicitudin dolor posuere, blandit libero. Donec ullamcorper leo eget semper egestas. Phasellus pharetra lacus sapien, at sagittis libero molestie sit amet. In sodales neque sit amet blandit aliquet. Proin vitae dolor nisi. Nunc aliquam felis aliquam, ornare neque luctus, blandit neque.
        </div>
    </div>
    <div class="shadowCover"></div>
</div>