Question

我正在尝试重新创建此team/leadership page：

我在ul元素周围放了一个方框阴影，如上例所示。我无法以相同的方式获得li元素周围的边距 - 我将右边距设置为5像素，但它仍然以白色为边界。如何将div（或li元素之间的空格）填充为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>的影子。盒子阴影只在div周围，并没有填充它的内部。

Box-shadow vs Drop shadow

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

1 个答案: