內置CSS屬性無法處理框陰影

我試圖使用列屬性將某些列表項對齊到列中。這些列正確對齊了我的元素，但是每個元素的投影都被破壞了。列的第一個元素的陰影的上部滯後於前一列。內置CSS屬性無法處理框陰影

請參考下面的圖片和this codepen進行演示。

下面的代碼：

HTML：

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
</ul>

CSS：

li { 
    width: 50px; 
    height: 70px; 
    text-align: center; 
    display: block; 
    background-color: tomato; 
    padding: 10px; 
    line-height: 70px; 
    -webkit-column-break-inside: avoid; 
    page-break-inside: avoid; 
    break-inside: avoid; 
    box-shadow: 0px 0px 9px 4px #CCC; 
    -webkit-box-shadow: 0px 0px 9px 4px #CCC; 
    -moz-box-shadow: 0px 0px 9px 4px #CCC; 
} 

ul { 
    margin: 40px; 
    -webkit-column-count: 4; 
    -webkit-column-gap: 25px; 
    column-count: 4; 
    column-gap: 25px; 
    width: 300px; 
}

我想知道是否有一種解決這個問題的方法。我可以使用flex或任何其他網格技術，但這是我的目的最方便和最方便的方法。我想知道是什麼導致這個問題，如果它可以修復。如果此問題已在本網站上討論過，請提供鏈接。 TIA

編輯：這似乎是工作正常的mozilla，這個問題可以在鉻中看到。

來源

2016-03-09 chetan92

此使用看起來好像沒什麼問題火狐[CodePen]（http://codepen.io/anon/pen/MyyVgL） – dippas

謝謝@dippas，我編輯了描述。 – chetan92

使用Chrome，你需要添加一些利潤，包括足夠的空間陰影顯示，以避免看到它打破，避免箱子打破，以及，你需要，在這個時候，使用display:inline-block;

/* Added*/ 
 

 
li { 
 
    margin: 5px 0; 
 
    display: inline-block; 
 
} 
 
/* End added*/ 
 

 
li { 
 
    width: 50px; 
 
    height: 70px; 
 
    text-align: center; 
 
    background-color: tomato; 
 
    padding: 10px; 
 
    line-height: 70px; 
 
    -webkit-column-break-inside: avoid; 
 
    page-break-inside: avoid; 
 
    break-inside: avoid; 
 
    box-shadow: 0px 0px 9px 4px #CCC; 
 
} 
 
ul { 
 
    margin: 40px; 
 
    -webkit-column-count: 3; 
 
    -moz-column-count: 3; 
 
    column-count: 3; 
 
    -webkit-column-gap: 25px; 
 
    -moz-column-gap: 25px; 
 
    column-gap: 25px; 
 
    width: 300px;/* for 3 col, 375px for 4 cols ;) */ 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
</ul>

旁邊，如果算上4列，將大小設置爲圍繞375px，或3列，300像素要細

fork of your pen

來源

2016-03-09 15:18:56

謝謝@Gyryrillus，這似乎是合適的解決方案 – chetan92

你可以試試這個

li { 
    width: 50px; 
    height: 70px; 
    text-align: center; 
    display: block; 
    background-color: tomato; 
    padding: 10px; 
    line-height: 70px; 
    box-shadow: 0px 0px 9px 4px #CCC; 
    -webkit-box-shadow: 0px 0px 9px 4px #CCC; 
    -moz-box-shadow: 0px 0px 9px 4px #CCC; 
    margin:10px; 
    float:left; 
} 

ul { 
    margin: 40px; 
    width: 300px; 
}

來源

2016-03-09 14:55:00 Tom

內置CSS屬性無法處理框陰影

回答

相關問題