今天小编跟大家讲解下有关CSS3实现曲线阴影和翘边阴影 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3实现曲线阴影和翘边阴影 的相关资料，希望小伙伴们看了有所帮助。
本文实例为大家分享了CSS3实现曲线阴影和翘边阴影的效果，原来不用ps技术也可以实现阴影效果，很棒的效果，供大家参考，具体内容如下
效果图如下：
index.html
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>CSS3实现曲线阴影和翘边阴影</title> <style> body{ font-family:"微软雅黑","MicrosoftYaHei"; font-size:20px; } body,ul,li,h1{ padding:0; margin:0; } ul{ list-style:noneoutsidenone; } .wrap{ width:70%; height:200px; margin:50pxauto; background-color:#fff; } .wraph1{ font-size:40px; text-align:center; line-height:200px; } .effect{ position:relative; -webkit-box-shadow:01px4pxrgba(0,0,0,0.3),0040pxrgba(0,0,0,0.1)inset; -moz-box-shadow:01px4pxrgba(0,0,0,0.3),0040pxrgba(0,0,0,0.1)inset; -o-box-shadow:01px4pxrgba(0,0,0,0.3),0040pxrgba(0,0,0,0.1)inset; box-shadow:01px4pxrgba(0,0,0,0.3),0040pxrgba(0,0,0,0.1)inset; } .effect::after,.effect::before{ content:''; background:#f00; position:absolute; top:50%; bottom:0; left:20px; right:20px; -webkit-box-shadow:0020pxrgba(0,0,0,0.8); -moz-box-shadow:0020pxrgba(0,0,0,0.8); -o-box-shadow:0020pxrgba(0,0,0,0.8); box-shadow:0020pxrgba(0,0,0,0.8); border-radius:100px/10px; z-index:-1; } .box{ width:980px; height:auto; clear:both; overflow:hidden; margin:20pxauto; } .boxli{ width:300px; height:210px; float:left; margin:20px10px; border:2pxsolid#EFEFEF; -webkit-box-shadow:01px4pxrgba(0,0,0,0.27),0060pxrgba(0,0,0,0.1)inset; -moz-box-shadow:01px4pxrgba(0,0,0,0.27),0060pxrgba(0,0,0,0.1)inset; -o-box-shadow:01px4pxrgba(0,0,0,0.27),0060pxrgba(0,0,0,0.1)inset; box-shadow:01px4pxrgba(0,0,0,0.27),0060pxrgba(0,0,0,0.1)inset; position:relative; background-color:#FFF; } .boxliimg{ display:block; width:290px; height:200px; margin:5px; } .boxli:before{ content:''; position:absolute; width:90%; height:80%; left:20px; bottom:8px; background-color:transparent; box-shadow:08px20pxrgba(0,0,0,0.6); -webkit-box-shadow:08px20pxrgba(0,0,0,0.6); -moz-box-shadow:08px20pxrgba(0,0,0,0.6); -o-box-shadow:08px20pxrgba(0,0,0,0.6); -webkit-transform:skewX(-11deg)rotate(-4deg); -moz-transform:skewX(-11deg)rotate(-4deg); -ms-transform:skewX(-11deg)rotate(-4deg); -o-transform:skewX(-11deg)rotate(-4deg); transform:skewX(-11deg)rotate(-4deg); z-index:-1; } .boxli:after{ content:''; position:absolute; width:90%; height:80%; right:20px; bottom:8px; background-color:transparent; box-shadow:08px20pxrgba(0,0,0,0.6); -webkit-box-shadow:08px20pxrgba(0,0,0,0.6); -moz-box-shadow:08px20pxrgba(0,0,0,0.6); -o-box-shadow:08px20pxrgba(0,0,0,0.6); -webkit-transform:skewX(11deg)rotate(4deg); -moz-transform:skewX(11deg)rotate(4deg); -ms-transform:skewX(11deg)rotate(4deg); -o-transform:skewX(11deg)rotate(4deg); transform:skewX(11deg)rotate(4deg); z-index:-1; } </style> </head> <body> <divclass="wrapeffect"> <h1>ShadowEffect</h1> </div> <ulclass="box"> <li><imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif <li><imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif <li><imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif </ul> </body> </html>以上就是本文的全部内容，希望对大家的学习有所帮助。
来源：爱蒂网
