记录前端历程：如何使用CSS属性创建爱心+阴影

前言

  在学习了如何用纯CSS构造爱心后就想给加个阴影，就去网上搜，搜到了如何➕阴影的方法（使用box-shadow），作为一个萌新琢磨了一会儿才想出怎么➕，大佬手下留情。。

使用 CSS 和 HTML 创建更复杂的形状

  世界上最流行的形状非心形莫属了，我们首先需要创建一个心型。我们需要用到:before和:after伪类。这些伪类用来在选择元素之前和之后添加一些内容。

代码如下：

<style>
.heart{                  <!-- 主类  -->
position:absolute;
margin:auto;
top:0px;
right:0px;
left:0px;
bottom:0px;
width:100px;
background-color:pink;
height:100px;
transform:rotate(-45deg);
box-shadow:22px 12px 10px -0px #DDDDDD; 
}
.heart:before{           <!--  类前  -->
position:absolute;
content:"";
background-color:pink;
width:100px;
height:100px;
top:-50px;
border-radius:50px;
box-shadow:28px -4px 10px 0px #DDDDDD; 
}
.heart:after{            <!--  类后  -->
position:absolute;
content:"";
background-color:pink;
width:100px;
height:100px;
right:-50px;
border-radius:50px;
box-shadow:28px 6px 10px 5px #DDDDDD; 
}

</style>
<div class="heart"></div>

效果图如下：