盈亏内CSS属性是无法处理的box-shadow

Question

我尝试了一些列表项对齐到使用列属性列。列对准我的元素正确，但每个这些元素的原因归结于阴影正在打破。列的第一个元素的阴影的上部上一列滞后。

请询问演示下面的图片和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;
}

我想知道是否有解决这个问题的一种方式。我可以用柔性或任何其他电网的技术，但是这是我的目的，最容易和方便的方法。我想知道是什么原因造成这个问题，如果它可以固定。如果这个问题已经被本网站上的讨论，请提供一个链接。 TIA

编辑：这似乎是工作的罚款为Mozilla，这个问题可以在Chrome中看到。

Answer 1

对于浏览器，你需要添加一些利润，包括足够的空间阴影显示，以避免看到它打破，避免箱子打破，以及，你所需要的，在这个时候，使用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

---

三年后...错误仍然存​​在。

渲染也可以通过backface-visibility:hidden;更好

/* Added*/

li {
  margin: 5px 0;
  display: inline-block;
  backface-visibility:hidden;
}
/* 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>

Answer 2

你可以试试这个

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;
}