我已将阴影添加到复选框的标签中,以便在选中它们时出现阴影。它们在 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;
}
它们应该看起来像这样
但是它们看起来像这样(阴影被剪掉了)
当我在玩这个时,我认为一种解决方案可能是使用盒子阴影,并应用使用 vw 的边框半径,以实现比例。
类似这样的:
.class {
box-shadow: 6px 6px 0 #5E7735;
border-radius: 5vw; /* Or whatever fits the corners of the image used) */
}
这是一种解决方法,但希望它可以帮助那里的人!
我知道这已经是 2 年前的事了,但我认为它可能会对某人有所帮助。我注意到我的投影被切断了,直到我通过 Desktop Safari 的开发者选项检查它。一旦我突出显示该元素,阴影就会正常显示。令人气愤。玩了一段时间后,我通过在特定元素上使用
z-index
让它工作。请注意,当我同时定位几个元素(一些按钮)时,它不起作用。我必须一次瞄准一个目标,我只需添加 z-index: 2
就可以了。太奇怪了。