盒影子都沒四捨五入

Question

所以我工作的這個網站上 - http://www.roseandlilyprinting.com/

如果你去港口對開節你會看到盒子陰影不四捨五入適合圓角半徑使得盒子陰影擾亂感覺

這裏的CSS代碼片斷#navBarPort是什麼東西有陰影框與#allImages沿

感謝您的幫助

#navBarPort { 
 
    background-color: #CCCCCC; 
 
    display: block; 
 
    height: 80px; 
 
    margin: 55px auto; 
 
    position: relative; 
 
    text-align:center; 
 
    font-size: 1.2em; 
 
    border-radius: 10px 10px 10px 10px; 
 
    box-shadow: 1px 1px 1px #999, 
 
    2px 2px 2px #999, 
 
    3px 3px 3px #999, 
 
    4px 4px 4px #999, 
 
    5px 5px 5px #999, 
 
    6px 6px 6px #999, 
 
    7px 6px 7px #999, 
 
    8px 6px 8px #999, 
 
    9px 6px 9px #999; 
 
} 
 

 

 
#navBarPort a{ 
 
    color: #FFFFFF; 
 
    display: inline-block; 
 
    height: 39px; 
 
    line-height: 37px; 
 
    padding: 0 15px; 
 
    text-shadow:1px 1px 1px #315218; 
 
    text-decoration: none; 
 
} 
 

 
#navBarPort a:hover{ 
 
    text-decoration:none; 
 
    color: #27A5BA; 
 
} 
 

 
#navBarPort a.active{ 
 
    color: #27A5BA; 
 
} 
 

 

 
/*---------------------------- 
 
\t Content area 
 
-----------------------------*/ 
 
#images { 
 
    height: 460px; 
 
    display: inline-block; 
 
    text-align: center; 
 
    padding-left: 20px; 
 
    overflow: hidden; 
 

 
} 
 

 

 
#allImages{ 
 
    display:block; 
 
    height: 490px; 
 
    margin:0 auto; 
 
    padding: 10px; 
 
    border-radius: 10px 10px 10px 10px; 
 
    box-shadow: 10px -10px 5px #999; 
 
    -moz-box-shadow: 10px -10px 5px #999; 
 
    -webkit-box-shadow: 10px -10px 5px #999; 
 
    -o-box-shadow: 10px -10px 5px #999; 
 
    background-color: #CCCCCC; 
 
} 
 

 
#allImages li{ 
 

 
    float: left; 
 
    height: 96px; 
 
    list-style: none outside none; 
 
    margin: 6px; 
 
    position: relative; 
 
    width: 115px; 
 
    overflow: hidden; 
 
    -moz-box-shadow: 0 0 5px #000; 
 
    -webkit-box-shadow: 0 0 5px #000; 
 
    box-shadow: 0 0 5px #000; 
 
} 
 

 
#allImages ul li img{ 
 
    cursor: pointer; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#allImages ul{ 
 
    overflow:auto; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
#allImages ul.hidden{ 
 
    display:none; 
 
}

Answer 1

由於div元素上的overflow: hidden屬性具有類flex-viewport，因此您的方框陰影被切斷。

請注意，陰影框不一定會保留在元素的邊界框內，因此可以視爲溢出。

請注意，刪除該屬性將干擾柔性滑塊，但可以找到解決方法（例如，在父元素上設置overflow: hidden）。