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

2020-01-27 14:17:16

字体：大中小

来源：转载

供稿：网友

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

<!DOCTYPE HTML><html lang="en-US"><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 class="demo"><div class="box box1"><p>Box1</p></div></div>			</body></html>

上一篇：CSS3 3D旋转立方体

下一篇：背景透明，内容不透明CSS代码生成器