阴影在 iOS Safari 上无法正常工作答案

【问题标题】：Drop-shadow not working properly on iOS Safari阴影在 iOS Safari 上无法正常工作
【发布时间】：2021-01-20 00:26:48
【问题描述】：

我已经为复选框的标签添加了阴影，这样当它们被选中时，阴影就会出现。它们在 chrome 上完美运行，但是当我在我的 mac 和 iPhone 上的 safari 上尝试它们时，阴影没有出现。我曾尝试使用 -webkit-filter CSS，但这没有任何效果。

我已经包含了下面的 HTML 和 CSS。

<li>
<input type="checkbox" id="dairy" name="lifestyle" value="dairy-">
<label for="dairy">
<img src="https://cdn.shopify.com/s/files/1/0433/2958/5306/files/Cheese_Icon.png?v=1611093331" class="choose--contents--img" alt="">
<p>Dairy</p>
</label>
</li>


label {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #5E7735;
  background-color: white;
  border-radius: 8px;
  width: 117.5px;
  height: 140px;
  box-sizing: border-box;
  cursor: pointer;
}

:checked + label {
  filter: drop-shadow(6px 6px 0 #5E7735);
  -webkit-filter: drop-shadow(6px 6px 0 #5E7735);
  -moz-filter:  drop-shadow(6px 6px 0 #5E7735);
  -ms-filter:  drop-shadow(6px 6px 0 #5E7735);
  -o-filter: drop-shadow(6px 6px 0 #5E7735);
  transition: filter 0.1s ease-in;
  -webkit-transition: filter 0.1s ease-in;
}

它们应该是这样的

但它们看起来像这样（阴影被切断）

【问题讨论】：

这对于 Safari 的 css 来说是一个可怕的问题，无论是在 iOS 设备上还是在 Mac 上。不幸的是，我不确定这个问题是否有很好的解决方案。

标签： html css dropshadow

【解决方案1】：

当我在玩这个时，我认为一种解决方案可能是使用盒子阴影，并应用使用 vw 的边框半径，以实现比例。

类似这样的：

.class {
    box-shadow: 6px 6px 0 #5E7735;
    border-radius: 5vw; /* Or whatever fits the corners of the image used) */
}

这是一种解决方法，但希望它可以帮助那里的人！

【讨论】：