CSS3边框暗影实现2种图片列表展现结果-案例解析（代码实例）
本文指标：
1、把握CSS3中内暗影和外暗影的用途
题目：
1、请求运用纯DIV+CSS实现如下结果
2、新建index.html,并把架构先写好
带暗影图片展现列表
暗影结果一
暗影结果二
3、添补细节局部，把相干的元素写进来
剖析：
1、新建列表个别我们是用ul
2、首先个列表的暗影结果我们取名叫做boxshadow1
3、由于依据结果我们可以看出每个li都需要float，所以我们需要独自的增加一个clear li ,这样可以让ul包裹住里面浮动的li
4、最后一列要做特殊的样式处置不需要margin-left，所以样式名字我们给它取名为lastitem,这样利便独自为其进行样式设定
5、由于我们发明2个列表其实样式都差未几，独一的区别就是暗影结果不一样，所以新建第二个列表的时候可以直接copy首先个，只是第二个列表的li的样式我们就叫做boxshadow2
终究代码如下:
带暗影图片展现列表
暗影结果一
暗影结果二
4、写样式
根名目新建css名目，里面创建index.css，里面的样式怎么写呢
思绪剖析：
.container剖析
1、平常最外层的容器我们可认为里面所有子元素定义一些共同的属性，比方padding:0,margin:0，这样防止一些元素有默许的padding,margin，影响我们的思绪
所以index.css增加代码如下：
.container *{
padding:0;
margin: 0;
}p段降剖析
1、文字要居中
所以index.css增加代码如下：
p{ text-align: center; }ul 剖析
1、依据请求得知，ul width=800px,同时要居中(margin:0 auto),为了利便看居中结果，所以我们为它设定一个border:1px solid red
所以index.css增加代码如下：
.shadow{
width:800px;
margin:10px auto;
border:1px solid red;
}ul li 剖析
1、依据请求得知，图片大小为180,我们可以把li的宽度设定为180,height=180,呈正方形显示，然后由于是水平罗列，所以float:left,不带玄色圆点，所以list-style:none,
然后右间距为 800-（180*4）=80 然后80/3 约等于 26.6,即margin-right:26.6
2、但是最背面的图片所在li，没有margin-right,所以还需要独自为li.lastitem设定一下
3、为了让ul仍然能够包裹住里面的li，我们需要为最后一列li.clear 革除一下浮动，且该li的width,height都要为0
所以index.css增加代码如下：
.shadow li{
list-style: none;
float: left;
width: 180px;
height: 180px;
margin-right: 26.5px;
}
.shadow li.lastitem{
margin-right: 0;
}
.shadow li.clear{
clear: both;
float: none;
width: 0;
height: 0;
}图片剖析
1、图片要显示为180，只有设定width:100%即可，让图片的宽=所在li的宽
所以index.css增加代码如下：
.shadow li img{width:100%;}暗影剖析
1、外暗影结果，依据请求得知，box-shadow x-shadow:4px y-shadow:2px 依稀度=6px 色彩为#333333，名字就叫做boxshadow1
2、内暗影结果，依据请求得知，box-shadow x-shadow:0 y-shadow:0,依稀度为30px,色彩同样，名字就叫做boxshadow2
所以index.css增加代码如下：
.boxshadow1{box-shadow:4px 2px 6px #333333; }
.boxshadow2{
box-shadow: 0px 0px 30px #333333 inset;
}好，到当前为止，我们就把所有我们能想到的样式写完了，最后依据效果再做修改调整，到此为止，index.css的终究代码如下
.container *{
padding:0;
margin: 0;
}
p{ text-align: center; }
.shadow{
width:800px;
margin:10px auto;
border:1px solid red;
}
.shadow li{
list-style: none;
float: left;
width: 180px;
height: 180px;
margin-right: 26.5px;
}
.shadow li.lastitem{
margin-right: 0;
}
.shadow li.clear{
clear: both;
float: none;
width: 0;
height: 0;
}
.shadow li img{width:100%;}
/* 暗影 */
.boxshadow1{box-shadow:4px 2px 6px #333333; }
.boxshadow2{
box-shadow: 0px 0px 30px #333333 inset;
}
.shadow li img{width:100%;}5、接下来，我们把样式文件引入index.html中
带暗影图片展现列表
暗影结果一
暗影结果二
运转结果如下：
依据效果我们细心调查，会发明首先个结果是合我们的用意，但是第二个的内暗影结果没有实现出来，为何呢？
是不是样式失效了呢？接下来略微修改一下代码，把最后一个图片去除看下
带暗影图片展现列表
暗影结果一
暗影结果二
运转结果如下：
注明什么呢？注明样式其实是对的，的确是内暗影的结果，但是为何加上图片就看不到内暗影的结果了呢，这里是重点
当要为图片设定内暗影的时候，要是只是设定图片外层的容器暗影，它的暗影结果会被图片遮住，所以需要为图片再设定position: relative;z-index:-1;才可以
接下来我们试试，在index.css中修改img样式如下：
.boxshadow2 img{
position: relative;
z-index:-1;
width: 100%;
}然后再来运转看下：
.container *{
padding:0;
margin: 0;
}
p{ text-align: center; }
.shadow{
width:800px;
margin:10px auto;
/* border:1px solid red; */
}
.shadow li{
list-style: none;
float: left;
width: 180px;
height: 180px;
margin-right: 26.6px;
}
.shadow li.lastitem{
margin-right: 0;
}
.shadow li.clear{
clear: both;
float: none;
width: 0;
height: 0;
}
.shadow li img{width:100%;}
/* 暗影 */
.boxshadow1{box-shadow:4px 2px 6px #333333; }
.boxshadow2{
box-shadow: 0px 0px 30px #333333 inset;
}
.boxshadow2 img{
position: relative;
z-index:-1;
width: 100%;
}index.html代码如下：
带暗影图片展现列表
暗影结果一
暗影结果二
运转效果如下：
内暗影语法，在上面语法的根基上+inset
x-offset,y-offset的值可正可负
x-offset为正表示向右，负数向左
y-offset为正表示向下，负数向上
2、要注意为图片增加内暗影，可以通过设定position:relative,z-index实现
但愿本文能给大家带来一定的帮忙，感谢！！！
以上就是CSS3边框暗影实现2种图片列表展现结果-案例解析（代码实例 ）的细致内容，更多请关注 百分百源码网 其它相干文章！
