CSS控制中间阴影,如图,中间阴影部分多,两边很淡。

html-css011

CSS控制中间阴影,如图,中间阴影部分多,两边很淡。,第1张

可以利用before和after伪类产生两个旋转一定角度的阴影来实现,比如:

<style>

section {

   POSITION:relative 

   margin:36px 50px 

   width:640px 

   height:200px 

   background-color:#fff 

   border:10px solid #ff0

}

section:before {

   position:absolute 

   z-index:-1 

   left:20px 

   bottom:10px 

   width:80% 

   height:20px 

   content:"" 

   transform:skew(-18deg) rotate(-3deg) 

   -webkit-transform:skew(-18deg) rotate(-3deg) 

   -moz-transform:skew(-18deg) rotate(-3deg) 

   box-shadow:0 20px 20px #666

}

section:after {

   position:absolute 

   z-index:-2 

   right:20px 

   bottom:10px 

   width:80% 

   height:20px 

   content:"" 

   transform:skew(18deg) rotate(3deg) 

   -webkit-transform:skew(18deg) rotate(3deg) 

   -moz-transform:skew(18deg) rotate(3deg) 

   box-shadow:0 20px 20px #666

}

</style>

<section></section>

浮动没有脱离文档流,你用的相对定位也没脱离文档流。你对相对定位和浮动的理解都有问题,买本书重新学了来。

你需要的是用:

相对定位嵌套绝对定位(自己百度下这句话)

父div相对定位,然后里面子元素即图片采用绝对定位。html结构要改成这样:

<div><img src="xxx.gif" /></div>