drop-shadow与box-shadow

css3 filter:drop-shadow和box-shadow区别

一、filter:drop-shadow

          drop-shadow是css3新特性，用于单层投影，为什么说是投影呢，用drop-shadow做投影与灯源下的物体投影更为相似。投影不能叠加。

          用法：

     filter:drop-shadow(x偏移，y偏移，模糊度，色值);

     filter:drop-shadow(10px 10px 5px black);

      

         兼容：

        

二：box-shadow

         css3新特性，用于增加阴影边框，可以多个阴影叠加

         用法：

     box-shadow: x偏移 y偏移 模糊度 色值;

     box-shadow:10px 10px 5px black;

     box-shadow: inset 5px 5px 10px blcak; // 支持内阴影

         

           内阴影：

           

         兼容：

         

  三、区别

             1.阴影与投影的区别，box-shaow为盒阴影，可叠加阴影。drop-shadow为滤镜投影，不可叠加。

        box-shaow: 5px 5px 10px black;

            

        filter: drop-shadow(5px 5px 10px black);

            

   四：发现有趣实例：

          

    <div class="douyin"></div>