你也可以在::before和::after两个伪元素中添加阴影效果

 

    实例

 

#boxshadow {

 

    position: relative;

 

    b ox-shadow: 1px 2px 4px rgba(0, 0, 0, .5);

 

    pa dding: 10px;

 

    bac kground: white;

 

} 

 

#boxshadow img {

 

     width: 100%;

 

     border: 1px solid #8a4419;

 

     border-style: inset;

 

} 

 

#boxshadow::after {

 

     content: '';

 

    position: absolute;

 

    z-index: -1; /* hide shadow behind image */

 

    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); 

 

    width: 70%; 

 

    left: 15%; /* one half of the remaining 30% */

 

    height: 100px;

 

    bottom: 0;

 

}

 

    阴影的一个使用特例是卡片效果

 

    实例

 

div.card {

 

    width: 250px;

 

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

 

    text-align: center;

 

}