CSS实现阴影效果教程

开始 GO

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; /* 距离盒子内边距 */
}