css投影

一、单侧投影

<style>
     .box {
         width: 80px;
         height: 40px;
         background: orange;
         /* 第四个参数：扩张半径，根据指定的值去扩大或缩小投影的尺寸 */
         box-shadow: 0 5px 5px -4px rgba(0, 0, 0, .5)
     }
 </style>
 <div class="box"></div>

二、双侧投影

 <style>
    .box1 {
         width: 80px;
         height: 40px;
         background: orange;
         box-shadow: 5px 0 2px -5px black,
             -5px 0 2px -5px black
     }
 </style>
 <div class="box1"></div>

三、不规则投影

给正常的虚线正方形和切角的图片添加投影，直接进行box-shadow: 2px 2px 2px rgba(0, 0, 0, .8);的话会出现下面的情况

引用filter新属性 filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .8))，就可以得到下面的效果

<!-- 虚线正方形 -->
<style>
    .box {
        width: 40px;
        height: 40px;
        border: 2px dashed rgb(255, 165, 0);
        /* box-shadow: 2px 2px 2px rgba(0, 0, 0, .8); */
        box-sizing: border-box;
        filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .8))
    }
</style>
<div class="box"></div>

<!-- 切角正方形 -->
<style>
    .box1 {
        background: rgb(255, 165, 0);
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, transparent 5px, rgb(255, 165, 0) 0) top left,
            linear-gradient(-135deg, transparent 5px, rgb(255, 165, 0) 0) top right,
            linear-gradient(-45deg, transparent 5px, rgb(255, 165, 0) 0) bottom right,
            linear-gradient(45deg, transparent 5px, rgb(255, 165, 0) 0) bottom left;
        background-size: 50% 50%;
        background-repeat: no-repeat;
        /* box-shadow: 2px 2px 2px rgba(0, 0, 0, .8); */
        filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, .8))
    }
</style>
<div class="box1"></div>