CSS3实现曲线阴影和翘边阴影_html/css_WEB-ITnose

预备知识

DIV+CSS基础

圆角:border-radius

2D变幻:transform:skew && rotate

伪类::before 和 :after

代码

HTML结构代码很简单,CSS内含注释,图片小伙伴们自己替换哈!

HTML

            
啦啦啦德玛西亚!!!!
          
          
这是曲线阴影效果!!!!
          

• 
• 
• 

这是翘边阴影效果!!!!

CSS

* { outline: 0; padding: 0; margin: 0; border: 0; }/*简易版reset*/ul { list-style: none }/*取消列表样式*/p{ font-size:30px; text-align: center; font-weight: bold; margin:-30px 0 50px 0; }.wrap { width: 50%; height: 300px; margin: 80px auto; background: #fff; }/*包块的宽高,背景色及居中对齐*/.wrap h1 { font-size: 30px; text-align: center; line-height: 300px; }/*设置字体大小,对齐方式及行高(垂直居中)*/.effect { position: relative; -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, .3), 0px 0px 40px rgba(0, 0, 0, .1) inset; -moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, .3), 0px 0px 40px rgba(0, 0, 0, .1) inset; -ms-box-shadow: 0px 1px 4px rgba(0, 0, 0, .3), 0px 0px 40px rgba(0, 0, 0, .1) inset; -o-box-shadow: 0px 1px 4px rgba(0, 0, 0, .3), 0px 0px 40px rgba(0, 0, 0, .1) inset; box-shadow: 0px 1px 4px rgba(0, 0, 0, .3), 0px 0px 40px rgba(0, 0, 0, .1) inset; }/** * 设置盒子外阴影和内阴影 ----------------------------------------------------------------------- 可以使用十六进制颜色,若是需要用到透明度,建议用rgba box-shadow:h-shadow v-shadow blur spread color inset 必需：h-shadow(水平)，v-shadow（垂直） 可选：blur（模糊距离），spread（阴影尺寸），color（阴影颜色），inset（内阴影） 浏览器兼容：IE9+、FireFox4、Chrome、Opera、Safari5.1.1 */.effect:after,.effect:before { position: absolute; content: ''; top: 50%; bottom: 0; left: 30px; right: 30px; z-index: -1; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .8); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .8); -ms-box-shadow: 0 0 20px rgba(0, 0, 0, .8); -o-box-shadow: 0 0 20px rgba(0, 0, 0, .8); box-shadow: 0 0 20px rgba(0, 0, 0, .8); -webkit-border-radius: 100px/10px; -moz-border-radius: 100px/10px; -ms-border-radius: 100px/10px; -o-border-radius: 100px/10px; border-radius: 100px/10px; }/** * .追加盒子,产生曲线阴影的效果,应用after+before重叠阴影更加厚实,使用z-index调整位置 ----------------------------------------- :after 和 :before ，content添加内容， 浏览器兼容：对于IE8及更早版本中的：after，必须声明 border-radius:x/y(水平半径/垂直半径) */.box { width: 980px; height: auto; clear: both; overflow: hidden; margin: 20px auto; }/** * 主容器宽度固定,高度自适应..清除所有浮动且容器居中 */.box li { position: relative; width: 300px; height: 300px; float: left; margin: 20px 10px; border: 2px solid: #000; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, .7),0 0 60px rgba(0,0,0,.7) inset ; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, .7),0 0 60px rgba(0,0,0,.7) inset ; -ms-box-shadow:0 1px 4px rgba(0, 0, 0, .7),0 0 60px rgba(0,0,0,.7) inset ; -o-box-shadow:0 1px 4px rgba(0, 0, 0, .7),0 0 60px rgba(0,0,0,.7) inset ; box-shadow:0 1px 4px rgba(0, 0, 0, .7),0 0 60px rgba(0,0,0,.7) inset ; }/** * width:(300+10*2+2*2)*3 = 972    
效果图
   
 
希望这笔记对小伙伴们有些许用处~~~