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>

html部分：

css部分：

html部分：

css部分：

js部分:

直接引用图片；

用到css3里边的旋转功能，用三个矩形，左边向右旋转30度，只显示右边框，中间矩形只显示下边框，不旋转。右边矩形向左旋转30度，只显示左边框。

建议直接引用图片；比较省时省事。