我有一个PNG图像,它有自由形式(非正方形)。
我需要对这个图像应用阴影效果。
标准的方法……
-o-box-shadow: 12px 12px 29px #555;
-icab-box-shadow: 12px 12px 29px #555;
-khtml-box-shadow: 12px 12px 29px #555;
-moz-box-shadow: 12px 12px 29px #555;
-webkit-box-shadow: 12px 12px 29px #555;
box-shadow: 12px 12px 29px #555;
... 显示此图像的阴影,就像它是一个正方形一样。所以,我看到我的图像和正方形阴影,它不遵循物体的形式,显示在图像中。
有什么正确的方法吗?
您不能在所有浏览器上可靠地执行此操作。微软不再支持DX过滤器作为IE10+,所以没有一个解决方案在这里完全工作:
https://msdn.microsoft.com/en-us/library/hh801215 (v = vs.85) . aspx
唯一能在所有浏览器中可靠工作的属性是box-shadow,它只是把边框放在你的元素上(例如div),结果是一个方形边框:
box-shadow: horizontalOffset verticalOffset blurDistance spreadDistance color inset;
e.g.
box-shadow: -2px 6px 12px 6px #CCCED0;
如果你碰巧有一个“正方形”的图像,但有统一的圆角,投影使用border-radius,所以你可以一直在div中模拟你的图像的圆角。
下面是box-shadow的微软文档:
https://msdn.microsoft.com/en-us/library/gg589484 (v = vs.85) . aspx
在我的例子中,它必须在现代移动浏览器上工作,使用不同形状和透明度的PNG图像。我使用图像的副本创建了投影。这意味着我有两个相同图像的img元素,一个在另一个上面(使用position: absolute),后面的一个应用了以下规则:
.image-shadow {
filter: blur(10px) brightness(-100);
-webkit-filter: blur(10px) brightness(-100);
opacity: .5;
}
这包括亮度滤镜,以使底部图像变暗,以及模糊滤镜,以投射阴影通常具有的模糊效果。然后使用50%的不透明度来软化它。
这可以应用跨浏览器使用moz和ms标志。
例如:https://jsfiddle.net/5mLssm7o/