CSS3实现“图片阴影”效果
- 2019 年 12 月 13 日
- 筆記
利用多投影重叠的原理，实现曲线阴影与翘边阴影的效果，花一个小时看完的课程，理解的似懂非懂。直接发一下老师写的成品吧。用到来取。css都补上了注释。
- 第1章曲线阴影的实现 1-1效果演示 1-2结构编写 1-3原理分析 1-4 box-shadow讲解 1-5 主阴影(内阴影外阴影 ) 1-6 after与before讲解 1-7曲线阴影
- 第2章翘边阴影的实现 2-1翘边阴影
效果
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; /* 距离盒子内边距 */ }
