CSS中PNG图像的阴影 – 开发百科-程序代码问答平台

我有一个PNG图像，它有自由形式（非正方形）

我需要将阴影效果应用于此图像

标准方法

-o-box-shadow:12px 12px 29px#555；
-icab盒影：12px 12px 29px#555；
-khtml盒影：12px 12px 29px#555；
-moz盒阴影：12px 12px 29px#555；
-网络工具包盒阴影：12px 12px 29px#555；
盒影：12px 12px 29px#555；

。。。显示此图像的阴影，就像它是正方形一样。所以，我看到我的图像和方形阴影，它不遵循对象的形式，显示在图像中

有什么方法可以做得好吗

派对有点晚了，但是是的，完全可以使用dropshadow过滤器（用于Webkit）、SVG（用于Firefox）和DX过滤器（用于IE）的组合，在alpha遮罩PNG周围创建“真实”的动态阴影

.shadowed{
-webkit过滤器：阴影（12px 12px 25px rgba（0,0,0,0.5））；
过滤器：url（#放置阴影）；
-ms过滤器：“progid:DXImageTransform.Microsoft.Dropshadow（OffX=12，OffY=12，Color='#444'）”；
过滤器：“progid:DXImageTransform.Microsoft.Dropshadow（OffX=12，OffY=12，Color='#444'）”；
}

&lt；！--此处的HTML元素--&gt；
&lt；svg height=“0”xmlns=”http://www.w3.org/2000/svg“&gt；
&lt；过滤器id=“放置阴影”&gt；
&lt；feGaussianBlur in=“SourceAlpha”stdDeviation=“4”/&gt；
&lt；feOffset dx=“12”dy=“12”result=“offset模糊”/&gt；
&lt；feFlood flood color=“rgba（0,0,0,0.5）”/&gt；
&lt；feComposite in2=“offsetblur”operator=“in”/&gt；
&lt；feMerge&gt；
&lt；feMergeNode/&gt；
&lt；feMergeNode in=“SourceGraphic”/&gt；
&lt/feMerge&gt；
&lt/过滤器&gt；
&lt/svg&gt；

比较了真实的投影和长方体阴影，以及我刚才介绍的一篇关于这项技术的文章

我希望这有帮助

相关文章：

发表评论 取消回复

发表评论取消回复