`ul` 带有框阴影和 `li` 元素周围的边距

Question

我正在尝试重新创建这个 team/leadership page:

我在 ul 元素周围放置了一个框阴影，如上例所示。我无法以相同的方式获得 li 元素周围的边距 - 我将右边距设置为 5 px，但它仍然带有白色边框。如何让边距（或 li 元素之间的 space）仅填充 div（或本例中的 ul）的背景颜色？

JSFiddle 在这里：http://jsfiddle.net/mzechar/gyo6t25e/10/

HTML:

       <section class = "content-wrapper team">
   <h3>Columbia</h3>
   <div class = "team-listing">
       <ul>
           <li>
               <div class = "team-member-listing-wrapper">
                       <div class = "circle-image-crop">
                           <img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
                       </div>
                   Jane Jam
                   <br>
                   <span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
               </div>
           </li>
           <li>
               <div class = "team-member-listing-wrapper">
                       <div class = "circle-image-crop">
                           <img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
                       </div>
                   Jane Jam
                   <br>
                   <span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
               </div>
           </li>
           <li>
               <div class = "team-member-listing-wrapper">
                       <div class = "circle-image-crop">
                           <img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
                       </div>
                   Jane Jam
                   <br>
                   <span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
               </div>
           </li>
           <li>
               <div class = "team-member-listing-wrapper">
                       <div class = "circle-image-crop">
                           <img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
                       </div>
                   Jane Jam
                   <br>
                   <span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
               </div>
           </li>
           <li>
               <div class = "team-member-listing-wrapper">
                       <div class = "circle-image-crop">
                           <img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
                       </div>
                   Jane Jam
                   <br>
                   <span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
               </div>
           </li>
           <li>
               <div class = "team-member-listing-wrapper">
                       <div class = "circle-image-crop">
                           <img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
                       </div>
                   Jane Jam
                   <br>
                   <span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
               </div>
           </li>
           <li>
               <div class = "team-member-listing-wrapper">
                       <div class = "circle-image-crop">
                           <img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
                       </div>
                   Jane Jam
                   <br>
                   <span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
               </div>
           </li>
           <li>
               <div class = "team-member-listing-wrapper">
                       <div class = "circle-image-crop">
                           <img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
                       </div>
                   Jane Jam
                   <br>
                   <span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
               </div>
           </li>
           <li>
               <div class = "team-member-listing-wrapper">
                       <div class = "circle-image-crop">
                           <img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
                       </div>
                   Jane Jam
                   <br>
                   <span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
               </div>
           </li>
           <li>
               <div class = "team-member-listing-wrapper">
                       <div class = "circle-image-crop">
                           <img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
                       </div>
                   Jane Jam
                   <br>
                   <span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
               </div>
           </li>
           <li>
               <div class = "team-member-listing-wrapper">
                   <img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
                   <span class = "team-member-name">Jane Jam</span>
               </div>
           </li>
       </ul>

   </div>
   </section>

CSS:

section.team{
    margin: auto;
    overflow: hidden;
    background: #FEFEFE;
    display:inline-block;
}

.team-listing{
    position:relative;
    margin-top:40px;
    margin-right:auto;
    margin-left:auto;
}

.team-listing li{
    display:inline-block;
    width: 30%;
    overflow: hidden;
    float:left;
    height: 320px;
    list-style-position:inside;
    margin-right:5px;
    background-color:#FEFEFE;
}

.bio{
    display: inline-block;
    text-align:left;
    color: #111;
    font-size: 1rem;
    line-height: 1;
    visibility:hidden;
}

.team-member-listing-wrapper{
    text-align: center;
    vertical-align: top;
    width:100%;
    height:100%;
    margin: 0 auto;
    display:inline-block;
}

.team-member-listing-wrapper strong{
    font-size: 1.125rem;
    line-height: 1;
}

.team-listing ul{
    display:table;
    list-style: none;
    box-shadow:0 0.9375rem 3.75rem rgba(2,2,22,0.1);
    white-space: nowrap;
    width:80%;
    margin:auto;
}

.circle-image-crop{
    width: 180px;
    height: 180px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
}

.circle-image-crop:hover{
    height:100%;
    width:auto;
    border-radius:0%;
}

.circle-image-crop img{
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: auto;
}

Answer 1

在这种情况下，您必须使用 filter: drop-shadow(5px 5px 5px #222); 作为 <ul> 的影子。 Box-shadow 仅在 div 周围，并没有填充它的内部。

Box-shadow vs Drop shadow

`ul` 带有框阴影和 `li` 元素周围的边距

`ul` with box shadow and margins around `li` elements

html

css

margin

html-lists