CSS3中怎么實現翹邊陰影效果

這期內容當中小編將會給大家帶來有關CSS3中怎么實現翹邊陰影效果，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

HTML代碼：

XML/HTML Code復制內容到剪貼板

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;/*內陰影*/  
   }   
     
   .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中怎么實現翹邊陰影效果了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。