Html 向包装器添加阴影边框

Html 向包装器添加阴影边框,html,css,wrapper,shadow,Html,Css,Wrapper,Shadow,我有一个包装器,它包含所有页面内容,我想在它周围放置另一个带有阴影边框的div,shadowwrap。今天我盯着这些东西看了很久了,我的大脑卡住了 #shadowwrap { background:url("images/shadowborder.png") repeat-y center; background-color:transparent; max-width:1000px; min-width:1000px; min-height:100%;

我有一个包装器,它包含所有页面内容,我想在它周围放置另一个带有阴影边框的div,shadowwrap。今天我盯着这些东西看了很久了,我的大脑卡住了

#shadowwrap {
    background:url("images/shadowborder.png") repeat-y center;
    background-color:transparent;
    max-width:1000px;
    min-width:1000px;
    min-height:100%;
    margin:0 auto;
    position:relative;
}

#wrapper {
    background-color:#FFF; 
    width:100%;
    max-width:980px;
    min-width:980px;
    min-height:100%!important;
    margin:0 auto;
    margin-bottom:-50px;
    position:relative;
    overflow:auto;
}
地点:


谢谢。

只需将阴影应用于包装器元素,您的生活就会轻松得多,如下所示:

#wrapper {
   /* shadowborder.png should be 1000px wide (10px of shadow on either side and 
      980px of white to create the solid background colour)  */
   background: url("images/shadowborder.png") repeat-y 0 0;        

   /* The 10px of left and right padding + 980px of width will result in a 
      1000px wide #wrapper */
   padding: 0 10px;
   width: 980px;

   /* remaining CSS.  I removed min-width and max-width because they were 
      both the same value and therefore didn't do much ;) */
   min-height: 100% !important;
   margin: 0 auto;
   margin-bottom: -50px;
   position: relative;
   overflow: auto;
}