مشکل استفاده از box shadow برای قسمت contents

[hamid70]

سلام
من قصد دارم از یک باکس شدو برای قسمت contents بگذارم ولی متاسفانه اعمال نمی شه باکس شدو که من تعریف کردم

#contents {
background:none repeat scroll 0 0 #FFFFFF
  width:495px;
  height:auto;
  margin:0 auto;
  border-radius:1px;  
  float:left;
  margin-left:5px;
  overflow:hidden;
       padding-left:2.3px;



    border-radius: 5px 5px 5px 5px;


    /*overflow: hidden;*/

    position: relative;

  
}
#contents:before {
    transform: skew(0deg, 4deg);
    -moz-transform: skew(0deg, 4deg);
    -webkit-transform: skew(0deg, 4deg);
    box-shadow: 5px 5px 5px #000000;
    -moz-box-shadow: 5px 5px 5px #000000;
    -webkit-box-shadow: 5px 5px 5px #000000;
    background-color: black;
    bottom: 0px;
    content: "";
    height: auto;
    position: absolute;
    right: 9px;
    width: 477px;
    z-index: -1;
}

#contents:after {
    transform: skew(0deg,-4deg);
    -moz-transform: skew(0deg,-4deg);
    -webkit-transform: skew(0deg,-4deg);
    box-shadow: -5px 5px 5px #000000;
    -moz-box-shadow: -5px 5px 5px #000000;
    -webkit-box-shadow: -5px 5px 5px #000000;
    background-color: black;
    bottom: 0;
    position: absolute;
    content: "";
    width: 477px;
    height: auto;
    left: 9px;
    z-index: -1;
}

می خواهم یک چیزی شبیح این عکس بشه البته من برای قسمت راست چپ از این کد توانستم استفاده کنم و برای contents نشد
[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]
دمو
persian-learn.ir/demo

[مهدی.]

سلام

بهتره از سایت w3schools.com کمک بگیرید !

موفق باشید