css3阴影效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>阴影</title> </head> <body> <style> /* box-shadow: offset-x、offset-y、blur-size可选（默认0）、spread-size可选（默认0）、color */ /*常见*/ .flex{display: flex;flex-wrap: wrap;} .box{ background: #ccc;border-radius: 10px; width: 100px;height: 100px;margin-right: 30px; text-align: center;line-height: 100px; } .boxshadow1{box-shadow: inset 0px 0px 5px 1px #000;} .boxshadow2{box-shadow: inset 0px 1px 2px 1px #000;} .boxshadow3{box-shadow: inset 0px 0px 5px #000;} .boxshadow4{box-shadow: inset 2px 2px 5px #000;} .boxshadow5{box-shadow: 0px 0px 2px 5px #000;} .boxshadow6{box-shadow: 6px 6px 1px 0px rgba(0,0,255,.1);} /**/ .boxshadow7{box-shadow: inset 0px 7px 5px -7px #000;} .boxshadow8{box-shadow: inset -7px 0px 5px -7px #000;} .boxshadow9{box-shadow: 0px 6px 4px -6px #000;} .boxshadow10{box-shadow: 3px 0px 8px -4px #000;} .boxshadow11{box-shadow: 0px 1px 0px 0px rgba(0,0,0);} /**/ .boxshadow12{box-shadow: inset 0px 7px 7px -7px #000,inset 0 -7px 7px -7px #000;} .boxshadow13{box-shadow: 7px 0px 7px -7px #000,-7px 0 7px -7px #000;} .boxshadow14{box-shadow: 0px 0px 0px 3px #bb0a0a,0px 0px 0px 6px #2e56bf, 0px 0px 0px 9px #ea982e;} /*其他*/ .box1{ width: 100%;height: 60px;text-align: center;background: #fff;position: relative; box-shadow: 0px 1px 4px rgba(0,0,0,.3),0px 0px 20px rgba(0,0,0,.1) inset; } .box1:before,.box1:after{ position: absolute; z-index: -1;content: ""; bottom: 15px;left: 10px;width: 50%; height: 20%; box-shadow: 0px 15px 10px rgba(0,0,0,.7); transform: rotate(-3deg); } .box1:after{right: 10px; left: auto; transform: rotate(3deg);} /**/ .box2{ background: #E6EEF6; width: 100%;overflow: hidden; z-index: -3;position: relative; } .box2 div{ width: 40%;height: 200px;float: left; margin: 25px 15px; border-radius: 5px; margin-right: 20px; position: relative; box-shadow: 0 1px 4px rgba(0,0,0,.3),0 0 20px rgba(0,0,0,.1) inset; } .box2 h3{ font-weight: normal;text-align: center;padding-top: 60px;color: #fff; width: 87%;height: 100px;margin-left: 6%;border: 2px dashed #F7EEEE; border-radius: 5px; } .boxshadow15{background: #EBA39E;} .boxshadow16{background: #EDE89A;} .boxshadow17{background: #9EEBA1;} .boxshadow18{background: #9EEBBF;} .boxshadow19{background: #9ED9EB;} .boxshadow20{background: #9EB3EB;} .boxshadow21{background: #DB9EEB;} .boxshadow22{background: #C49EEB;} .boxshadow15:before,.boxshadow15:after{ position: absolute; content: ""; z-index: -1; bottom: 12px;left: 15px;top: 80%; width: 45%; background: #9b7468; -webkit-box-shadow: 0 20px 15px #9b7468; -moz-box-shadow: 0 20px 15px #9b7468; box-shadow: 0 20px 8px #9b7468; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); transform: rotate(-4deg); } .boxshadow15:after{ -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); transform: rotate(4deg); right: 15px;left: auto; } .boxshadow16:before{ position: absolute; content: "";z-index: -1; width: 80%; background: #9f8641; top: 140px; bottom: 15px; left: 30px; -webkit-box-shadow: 0 23px 10px 0 #9f8641; -moz-box-shadow: 0 23px 10px 0 #9f8641; box-shadow: 0 23px 10px 0 #9f8641; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); transform: rotate(-4deg); } .boxshadow17:before,.boxshadow17:after{ position: absolute; content: "";z-index: -1; top: 2px; bottom: 0; left: 15px;right: 15px; border-radius: 100px/30px; -webkit-box-shadow: 0 0 30px 2px #479f41; -moz-box-shadow: 0 0 30px 2px #479f41; box-shadow: 0 0 30px 2px #479f41; } .boxshadow18:before,.boxshadow18:after{ position: absolute; content: "";z-index: -1; top: 14px; bottom: 14px; left: 0; right: 0; box-shadow: 0 0px 15px 3px #548e7f; border-radius: 100px/10px; } .boxshadow19:before,.boxshadow19:after{ position: absolute; content: "";z-index: -1; width: 15%; top: 40px; bottom: 50px; left: 10px; box-shadow: 0 10px 15px 20px #518c96; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); transform: rotate(-8deg); } .boxshadow19:after{ -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); transform: rotate(8deg); right: 10px;left: auto; } .boxshadow20:before,.boxshadow20:after{ position: absolute; content: "";z-index: -1; top: 100px; bottom: 5px; left: 30px; right: 30px; box-shadow: 0 0px 40px 13px #486685; border-radius: 100px/20px; } .boxshadow21:before,.boxshadow21:after{ position: absolute; content: "";z-index: -1; width: 80%; top: 25px; bottom: 150px; left: 20px; -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); transform: rotate(-6deg); } .boxshadow21:before{box-shadow: 10px -10px 20px 15px #984D8E;} .boxshadow21:after{ -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); transform: rotate(7deg); bottom: 25px;top: auto; box-shadow: 10px 10px 20px 15px #984D8E; } .box2 .boxshadow22{ box-shadow: -6px -6px 8px -4px rgba(250,254,118,.75),6px -6px 8px -4px rgba(254,159,50,.75),6px 6px 8px -4px rgba(254,255,0,.75),6px 6px 8px -4px rgba(0,0,255,2.75); } .box3{background: #000;width: 100%;height: 500px;position: relative;} .box3>div{ position: absolute;top: calc(50% - 150px);left: calc(50% - 150px); width: 300px;height: 300px; border-radius: 50%; /*box-shadow: inset 0 0 50px #fff, inset 20px 0 80px #f0f, inset -20px 0 80px #0ff, inset 20px 0 300px #f0f, inset -20px 0 300px #0ff, 0 0 50px #fff, -10px 0 80px #f0f, 10px 0 80px #0ff;*/ box-shadow: inset 0 0 25px #fff, inset 10px 0 40px #f0f, inset -10px 0 40px #0ff, inset 10px 0 150px #f0f, inset -10px 0 150px #0ff, 0 0 25px #fff, -5px 0 40px #f0f, 5px 0 40px #0ff; } .box4{background: #000;width: 100%;height: 500px;position: relative;} .box4>div{ position: absolute;top: calc(50% - 100px);left: calc(50% - 200px); width: 400px;height: 200px; background: #fff; border: 1px solid #fff; box-shadow: inset 60px 0 120px #f0f, inset -60px 0 120px #0ff; } .box5{background: #000;width: 100%;height: 500px;position: relative;} .box5>div{ position: absolute;top: calc(50% - 20px);left: calc(50% - 20px); width: 40px;height: 40px; background: #fff;border-radius: 50%; box-shadow: 0 0 60px 30px #fff, 0 0 100px 60px #f0f, 0 0 140px 90px #0ff; } </style> <div class="flex"> <div class="box boxshadow1"> <h3></h3> </div> <div class="box boxshadow2">3边内部阴影</div> <div class="box boxshadow3">外部阴影</div> <div class="box boxshadow4">右下外阴影</div> <div class="box boxshadow5">扩大阴影</div> <div class="box boxshadow6">半透明阴影</div> </div> <br /><br /> <p>下边细线</p> <div class="flex"> <div class="box boxshadow7">上边内阴影</div> <div class="box boxshadow8">右边内阴影</div> <div class="box boxshadow9">下边外阴影</div> <div class="box boxshadow10">右边外阴影</div> <div class="box boxshadow11">下边细线</div> </div> <br /><br /> <p>双边阴影、多重阴影</p> <div class="flex"> <div class="box boxshadow12">上下边内阴影</div> <div class="box boxshadow13">左右边内阴影</div> <div class="box boxshadow14">下边外阴影</div> </div> <br /><br /> <div class="box1"></div> <br /><br /> <div class="box2"> <div class="boxshadow15"> <h3>shadow1</h3> </div> <div class="boxshadow16"> <h3>shadow2</h3> </div> <div class="boxshadow17"> <h3>shadow3</h3> </div> <div class="boxshadow18"> <h3>shadow4</h3> </div> <div class="boxshadow19"> <h3>shadow5</h3> </div> <div class="boxshadow20"> <h3>shadow6</h3> </div> <div class="boxshadow21"> <h3>shadow7</h3> </div> <div class="boxshadow22"> <h3>shadow8</h3> </div> </div> <br /><br /> <div class="box3"> <div></div> </div> <br /><br /> <div class="box4"> <div></div> </div> <br /><br /> <div class="box5"> <div></div> </div> <br /><br /> <style> section { POSITION:relative; margin:36px 50px; width:640px; height:200px; background-color:#fff; border:10px solid #ff0 } section:before { position:absolute; z-index:-1; left:20px; bottom:10px; width:80%; height:20px; content:""; transform:skew(-18deg) rotate(-3deg); -webkit-transform:skew(-18deg) rotate(-3deg); -moz-transform:skew(-18deg) rotate(-3deg); box-shadow:0 20px 20px #666 } section:after { position:absolute; z-index:-2; right:20px; bottom:10px; width:80%; height:20px; content:""; transform:skew(18deg) rotate(3deg); -webkit-transform:skew(18deg) rotate(3deg); -moz-transform:skew(18deg) rotate(3deg); box-shadow:0 20px 20px #666 } </style> <section></section> </body> </html>
