搜索

首页 >web前端 >html教程 >CSS3实现曲线阴影和翘边阴影_html/css_WEB-ITnose

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

WBOY
WBOY原创
2016-06-24 11:43:491149浏览

预备知识

  • DIV+CSS基础
  • 圆角:border-radius
  • 2D变幻:transform:skew && rotate
  • 伪类::before 和 :after
    • 代码

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

    HTML

    <!DOCTYPE html><html lang="zh"><head>  <meta charset="UTF-8">  <title>CSS3实现曲线阴影和翘边阴影</title>  <link rel="stylesheet" href="css/style.css" type="text/css"></head><body>          <div class="wrap effect">            <h1>啦啦啦德玛西亚!!!!</h1>          </div>          <p>这是曲线阴影效果!!!!</p>          <ul class="box">            <li><img src="img/iconfont-blog.jpg" alt="测试图片"></li>            <li><img src="img/iconfont-github.jpg" alt="测试图片"></li>            <li><img src="img/iconfont-weibo.jpg" alt="测试图片"></li>          </ul>          <p>这是翘边阴影效果!!!!</p></body></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，必须声明<!DOCTYPE> 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 <980 * 增加阴影 */.box li img { display: block; width: 290px; height: 290px; margin: 5px; }/** * width:(290 + 5*2) = 300 == li.width * height:(290+ 5*2) = 300 == li.height */.box li:before{ position: absolute; content: ''; width: 90%; height:80%; left: 20px; bottom:13px; z-index: -1; -webkit-box-shadow:0 8px 20px rgba(0,0,0,.6) ; -moz-box-shadow:0 8px 20px rgba(0,0,0,.6) ; -ms-box-shadow:0 8px 20px rgba(0,0,0,.6) ; -o-box-shadow:0 8px 20px rgba(0,0,0,.6) ; box-shadow:0 8px 20px rgba(0,0,0,.6) ; -webkit-transform: skew(-8deg) rotate(-4deg); -ms-transform: skew(-8deg) rotate(-4deg); -o-transform: skew(-8deg) rotate(-4deg); transform: skew(-8deg) rotate(-4deg); }.box li:after{ position: absolute; content: ''; width: 90%; height:80%; right: 20px; bottom:13px; z-index: -2; -webkit-box-shadow:0 8px 20px rgba(0,0,0,.6) ; -moz-box-shadow:0 8px 20px rgba(0,0,0,.6) ; -ms-box-shadow:0 8px 20px rgba(0,0,0,.6) ; -o-box-shadow:0 8px 20px rgba(0,0,0,.6) ; box-shadow:0 8px 20px rgba(0,0,0,.6) ; -webkit-transform: skew(8deg) rotate(4deg); -ms-transform: skew(8deg) rotate(4deg); -o-transform: skew(8deg) rotate(4deg); transform: skew(8deg) rotate(4deg); }/** * 满满的计算....变形平行四边形.高度不能满 * * ---------------------------------------------------- * * transform 旋转; skew(xdeg,ydeg) * tansform:skew(x-angle,y-angle) 定义沿着X和Y轴的2D倾斜转换 * 一个参数单一方向2D转换,如X 水平,Y垂直 *rotate(degree) --- 图形旋转 */

    效果图


    希望这笔记对小伙伴们有些许用处~~~

    声明：
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    上一篇：Atom编辑器折腾记_(10)CSScomb增强版[CSS/LESS/SASS]_html/css_WEB-ITnose下一篇：Android动画学习--Tween Animation_html/css_WEB-ITnose

    相关文章

    查看更多