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

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

10年积累的成都做网站、成都网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站策划后付款的网站建设流程,更有巧家免费网站建设让你可以放心的选择与我们合作。

HTML代码:

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

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中怎么实现翘边阴影效果

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


分享名称:CSS3中怎么实现翘边阴影效果
文章位置:http://scyanting.com/article/igdjps.html

其他资讯