动态创建的li标签，用css给li标签里的图片添加阴影为什么不成功呢

你动态创建的代码，是把li和img都放到ul里，即类似这样：

<ul id="ps">

    <li></li>

    <img src="images/1.png" alt=""/>

    <li></li>

    .....

</ul>

这样的话，img就不受li的css约束了啊，当然就没阴影了。

应该把img放到li里，再把li放到ul里，即这样：

......

var li = document.createElement("li")

var img = document.createElement("img")

img.src = "images/"+(i+1)+".png"

li.appendChild(img)

ps.appendChild(li)

box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色

例：.boc{margin:100pxwidth:100pxheight:100pxborder:1px solid #111box-shadow:0px 0px 10px 10px #111}

<div class="boc" ></div>

你把div改成li就行了

ul.box li:before {

:before元素的内容之前插入新内容

z-index: -2

属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

position: absolute

生成绝对定位的元素

background: transparent

背景为透明

width: 90%

宽度为90%

height: 80%

高度为80%

content: ''

来插入生成内容

left: 20px

左边距离

bottom:8px

下面距离

-webkit-transform: skew(-12deg) rotate(-4deg)

斜切-12度，旋转-4度。下方同理，前缀是兼容不同浏览器

-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)

投影，左边投影为0，下方为8,虚化半径为20，投影颜色黑色，透明度为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)

behavior: url(ie-css3.htc)

兼容IE浏览器

第二段代码基本一样，只不过:after元素的内容之后插入新内容

---