CSS的盒子阴影属性在Safari中无法使用。

Question

10

box-shadow: 3px 3px 6px 6px;

这个属性在Chrome、Firefox和IE中可以使用，但是在Safari 5浏览器中不起作用。

我尝试过像这样编写，但它没有起作用。

-webkit-box-shadow:3px 3px 6px 6px;

- alli prashanth

可能是你机器上Safari浏览器的CSS渲染问题。尝试在另一台电脑上的不同Safari浏览器上进行相同的操作。 - Newton Sheikh

5个回答

6

您在这里没有定义颜色 (box-shadow: h-shadow v-shadow blur spread color inset;)

<color> 如果未指定颜色，则使用的颜色取决于浏览器 - 通常是颜色属性的值，但请注意Safari当前在这种情况下绘制透明阴影。

因此，为Safari定义颜色

-webkit-box-shadow: 3px 3px 6px 6px #color_you_want;

- NullPoiиteя

2

我非常感激带有负面评价的评论..相信我，我不是那种会进行报复性负面评价的人 :) - NullPoiиteя

3

作为参考，我曾经遇到过类似的问题，使用了以下的box-shadow:

box-shadow: 0 0.06rem 0 0 rgba(44, 43, 63, 0.1); （非常小的阴影！）

这个阴影在其他浏览器中都可以正常显示，但是Safari（v.8）无法显示该阴影。我不得不增加该值才能使其正常显示。

- Mohamed Ramrami

1

你尝试过这样吗：

-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;

- Anagio

@alliprashanth 没关系，如果您觉得这篇回答有帮助，请随意点赞或标记为答案。 - Anagio

1

#example1 {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
 box-shadow: 10px 10px 5px #888;
 }

- Vinay Pratap Singh Bhadauria

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mini John · Accepted Answer

-webkit-appearance: none;
-webkit-box-shadow: 3px 3px 6px 6px #addacolor;
box-shadow: 3px 3px 6px 6px #addacolor;