CSS3中怎么实现翘边阴影效果

这期内容当中小编将会给大家带来有关CSS3中怎么实现翘边阴影效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

HTML代码：

XML/HTML Code复制内容到剪贴板

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

   AI代码助手复制代码

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);   
    }

   AI代码助手复制代码

      效果：

上述就是小编为大家分享的CSS3中怎么实现翘边阴影效果了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>