欢迎您来到懒之才-站长的分享平台!   学会偷懒,并懒出境界是提高工作效率最有效的方法!
首页 > 经验分享 > Css&Div > CSS3边框阴影,折角效果演示

CSS3边框阴影,折角效果演示

2018-08-30 695 收藏 0 赞一个 0 真差劲 0 去评论

CSS3边框阴影,折角效果演示代码,主要说明一下,使用:before来制作底部阴影,并对阴影进行旋转的扭曲和位移设置,使用:after来制作顶部的阴影,并对阴影进行旋转的扭曲和位移设置。

代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3边框阴影,折角效果演示</title>
<style type="text/css">
*{margin: 0;padding:0;}
        body {margin: 0; padding: 20px 100px;background-color: #f4f4f4;}
        pre{max-height:200px;overflow:auto;}
        div.demo {overflow:auto;}
        .box {
            width: 300px;
            min-height: 300px;
            margin: 30px;
            display: inline-block;
            background: #fff;
            border: 1px solid #ccc;
            position:relative;
        }
        .box p {
            margin: 30px;
            color: #aaa;
            outline: none;
        }
        /*=========Box1===========*/
        .box1{            
            background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.1,#f3f3f3));
            background: -webkit-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
            background: -moz-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
            background: -o-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
            /*设置Box的阴影效果*/
            -webkit-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
            -moz-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
            box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
            /*制作右下脚折边效果*/
            -moz-border-radius: 0 0 6px 0 / 0 0 50px 0;
            -webkit-border-radius: 0 0 6px 0 / 0 0 50px 0;
            border-radius: 0 0 6px 0 / 0 0 50px 0;
        }
        /*使用:before来制作底部阴影,并对阴影进行旋转的扭曲和位移设置*/
        .box1:before{
            content: '';
            width: 50px;
            height: 100px;
            position:absolute;
            bottom:0; right:0;
            -webkit-box-shadow: 20px 20px 10px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);
            box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);
            z-index:-1;
            -webkit-transform: translate(-35px,-40px)    skew(0deg,30deg) rotate(-25deg);
            -moz-transform: translate(-35px,-40px) skew(0deg,32deg)    rotate(-25deg);
            -o-transform: translate(-35px,-40px) skew(0deg,32deg)    rotate(-25deg);    
                transform: translate(-35px,-40px) skew(0deg,32deg)    rotate(-25deg);    
        }
        /*使用:after来制作顶部的阴影,并对阴影进行旋转的扭曲和位移设置*/
        .box1:after{
            content: '';
            width: 100px;
            height: 100px;
            top:0; left:0;
            position:absolute;
            display: inline-block;
            z-index:-1;
            -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.2);
            box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.2);
            -webkit-transform: rotate(2deg)    translate(20px,25px) skew(20deg);
            -moz-transform: rotate(7deg) translate(20px,25px) skew(20deg);
            -o-transform: rotate(7deg) translate(20px,25px) skew(20deg);    
                transform: rotate(7deg) translate(20px,25px) skew(20deg);                
        }
</style>
</head>
<body>
<div>
<div class="box box1"><p>Box1</p></div>
</div>            
</body>
</html>

效果如下:

QQ截图20180830113638.jpg

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。

三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!

四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.

五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源,请注明转载来自并附带链接

七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com

大家评论