CSS3实现“图片阴影”效果

释放双眼,带上耳机,听听看~!

目录

    利用多投影重叠的原理,实现曲线阴影与翘边阴影的效果,花一个小时看完的课程,理解的似懂非懂。直接发一下老师写的成品吧。用到来取。css都补上了注释。

    • 第1章曲线阴影的实现
      1-1效果演示
      1-2结构编写
      1-3原理分析
      1-4 box-shadow讲解
      1-5 主阴影(内阴影外阴影 )
      1-6 after与before讲解
      1-7曲线阴影
    • 第2章翘边阴影的实现
      2-1翘边阴影

    效果
    %title插图%num

    HTML

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>box-shadow</title>
    <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
      <div class="wrap effect">
         <h3>Shadow Effect</h3>
      </div>
      <ul class="box">
          <li><img src="images/photo1.jpg"/></li>
          <li><img src="images/photo2.jpg"/></li>
          <li><img src="images/photo3.jpg"/></li>
      </ul>
    </body>
    </html>
    

     

    CSS

    body{font-family:Arial;/* 字体 */
         font-size:23px;}/* 字号 */
    .wrap h3{
      text-align:center;/* 位置居中 */
      position:relative;/* 定位对象不可层叠 */
      top:80px;/* 距离顶部距离 */
    }
    .wrap {
      width:70%;/* 宽 */
      height:200px;/* 高 */
      background:#FFF;/* 背景颜色 */
      margin:40px auto;/* 外边距 */
    }
    
    .effect{
      position:relative;  /* 定位类型 */     
         -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset;/* 外投影和内投影 */
       	   -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
        			box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;
    }
     .effect:before, .effect:after{
        content:"";/* 盒子内容 */
    	position:absolute; /* 定位类型 */
    	z-index:-1;/* 盒子层 */
    	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);/* 外投影和内投影 */
    	-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    	box-shadow:0 0 20px rgba(0,0,0,0.8);
    	top:50%;	/* 盒子距离顶部距离 */
    	bottom:0;	/* 盒子距离底部距离 */
    	left:10px;	/* 盒子距离左侧距离 */
    	right:10px;	/* 盒子距离右侧距离 */
    	/* 这里也可以直接写和盒子的大小width和height */
    	border-radius:100px / 10px;/* 圆角半径  /  斜切圆角 */
    	-moz-border-radius:100px / 10px; /* 效果同上,为了兼容部分浏览器 */
    
    } 
    
    ul.box {
    	width:980px;/* 宽 */
    	height:auto;/* 高 */
    	margin: 20px auto;/* 定位 边距 */
    	padding: 0;/* 定义内边距为0 */
    	clear: both;/* 在左右两侧均不允许浮动元素。 */
    /* 	left	在左侧不允许浮动元素。
    	right	在右侧不允许浮动元素。
    	both	在左右两侧均不允许浮动元素。
    	none	默认值。允许浮动元素出现在两侧。
    	inherit	规定应该从父元素继承 clear 属性的值。 */
    	overflow: hidden; /* 溢出的值会被修剪 */
    }
    
    ul.box li {
    	list-style-type: none;/* 在一个声明中设置所有的列表属性 无标记。 */
    	margin:20px 10px;/* 定位 边距  上下右左*/
    	padding: 0;/* 内边距 */
    	width: 300px;/* 宽 */
    	height: 220px;/* 高 */
    	border: 2px solid #efefef;/* 边框 宽度 颜色 */
    	position: relative;/* 定位类型 */
    	float: left;/* 元素向左浮动。 */
    	background: #ffffff; /* old browsers *//* 背景颜色 */
    	line-height:220px;/* 设置行高: */
    	font-size:32px;/* 字号 */
    	text-align:center;/* 文字对齐方式 */
    	
    	
    	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;/* 外投影和内投影 */
    	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset; 
    	-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
    	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
    	
    }
    
    ul.box li:before { 
    	 z-index: -2;  /* 层数 */
    	position: absolute;  /* 定位属性,绝对定位 */
    	background: transparent; /* 背景颜色,transparent为透明色 */
    	width: 90%; /* 宽90% */
    	height: 80%; /* 高80% */
    	content: ''; /* 盒子内容 */
    	left: 20px; /* 盒子距离左侧距离 */
    	bottom:8px; /* 盒子距离底部距离 */
    	
    	 -webkit-transform: skew(-12deg) rotate(-4deg); /* 盒子变形 */
    	 	-moz-transform:skew(-12deg) rotate(-4deg); 
    	 	-o-transform: skew(-12deg) rotate(-4deg); 
    	 	-ms-transform: skew(-12deg) rotate(-4deg);  
    	
    	-webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); /* 外投影和内投影 */
    	-moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
    	-o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
    	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
    	
    }
    
     ul.box li:after {  /* 底层阴影第二个 */
    	z-index: -1; /* 层数 */
    	position: absolute; /* 定位属性,绝对定位 */
    	background: transparent; /* 背景颜色,transparent为透明色 */
    	width: 90%; /* 宽90% */
    	height: 80%; /* 高 */
    	content: ''; /* 盒子内容 */
    	right:20px;   /* 盒子距离左侧距离 */
    	bottom:8px; /* 盒子距离底部的距离 */
    	
    	-webkit-transform: skew(12deg) rotate(4deg);  /* 盒子变形 */
    	-moz-transform:skew(12deg) rotate(4deg); 
    	-o-transform: skew(12deg) rotate(4deg); 
    	-ms-transform: skew(12deg) rotate(4deg); 
    	
    	-webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); /* 外投影和内投影 */
    	-moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
    	-o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
    	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); 
    
    }  
    
    .box li img{		/* 定义图片大小:统一图片大小格式 */
    	width:290px;	/* 图片宽 */
    	height:210px;	/* 图片高 */
    	padding:5px;	/* 距离盒子内边距 */
    }
    

     

    给TA打赏
    共{{data.count}}人
    人已打赏
    前端网站源码

    [钻芒美化] 在线解析视频VIP播放器安装源码,集成最新全能视频接口引流必备

    2019-8-17 0:04:59

    其他分享

    动态渐变彩色文字代码

    2019-8-21 17:55:07

    0 条回复 A文章作者 M管理员
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    有新私信 私信列表
    搜索