CSS3中怎么實(shí)現(xiàn)翹邊陰影效果

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)CSS3中怎么實(shí)現(xiàn)翹邊陰影效果，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

HTML代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. <divclass="box shadow"></div>

CSS代碼：

1. .box {   
       width: 300px;   
       height: 100px;   
       background: #ccc;   
       border-radius: 10px;   
       margin: 10px;   
   }   
     
   .shadow {   
       position: relative;   
       max-width: 270px;   
       box-shadow: 0px 1px 4px rgba(0,0,0,0.3),/* 外陰影*/  
                   0px 0px 20px rgba(0,0,0,0.1) inset;/*內(nèi)陰影*/  
   }   
     
   .shadow::before,   
   .shadow::after {   
      content:"";   
      position:absolute;   
      z-index:-1;   
   }   
     
   .shadow::before,   
   .shadow::after {   
      content:"";   
      position:absolute;   
      z-index:-1;   
      bottombottom:15px;   
      left:10px;   
      width:50%;   
      height:20%;   
   }   
     
   .shadow::before,   
   .shadow::after {   
      content:"";   
      position:absolute;   
      z-index:-1;   
      bottombottom:15px;   
      left:10px;   
      width:50%;   
      height:20%;   
      box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);   
      transform:rotate(-3deg);   
   }   
     
   .shadow::after{   
      rightright:10px;   
      left:auto;   
      transform:rotate(3deg);   
    }

      效果：

上述就是小編為大家分享的CSS3中怎么實(shí)現(xiàn)翹邊陰影效果了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。