使用伪类元素制作包裹的阴影效果图是这样的使用:before或者:after制作代码如下

效果图是这样的

使用:before或者:after制作

代码如下

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<!-- <div class="elem"></div> -->
	
	<article class="card">
  		<img src="./img/love.jpg" alt="">
  		<h2 class="card-title">Title here</h2>
	</article>
</body>

<script type="text/javascript">
	
</script>

<style>
body{
	 font-family: 'Arial';
}
.card {
  position: relative;
  width: 500px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 5px 10px 0 rgba(#000, 0.35);
  margin: 2rem auto;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  h2 {
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
    color: #fff;
  }
}
 .card:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;width: 88%;
    z-index: 1;
    background: linear-gradient(to top, #000, transparent);
  }

/*.card:after{
	content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 68px;
    width: 88%;
    background: linear-gradient(to top, #000, transparent);
}*/
.card-title{
	position:absolute;
	left: 20px;
	bottom: 0;
	color: #fff;
	/*z-index: 1;*/
  }



 .elem {
     position: relative;
     display: flex;
     align-items: center;
     max-width: 400px;
     background: #fff;
     padding: 2rem 1rem;
     font-size: 1.5rem;
     margin: 2rem auto;
     text-align: center;
     box-sizing: border-box;
 }

.elem:before,
.elem:after {
    content: "";
    position: absolute;
    top: 2px;
    width: 50%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(to bottom,transparent,#000);
    filter: blur(3px);
    opacity: 0.3;
}

.elem:before {
    left: 0;
    transform: skewY(-2deg);
    /*background: grey;*/
}

.elem:after {
    right: 0;
    transform: skewY(2deg);
    /*background: #000;*/
}
</style>
</html>