html – CSS过滤器,用于在对象周围创建实体边框

概述问题描述( Fiddle)： 我试图在PNG周围形成一个带有透明度的实线边框,因此盒子阴影不是一个选项(因为它只会遮住图像的方角). 我怎样才能得到一个滤镜：drop-shadow()在整个元素周围创建一个边框,而不需要模糊或分散阴影？我可以将多个过滤器应用于同一元素以实现此效果吗？或者还有另一种方法来实现这一目标吗？ 码： #object { position: absolute; 问题描述( Fiddle)：

我试图在PNG周围形成一个带有透明度的实线边框,因此盒子阴影不是一个选项(因为它只会遮住图像的方角).

我怎样才能得到一个滤镜：drop-shadow()在整个元素周围创建一个边框,而不需要模糊或分散阴影？我可以将多个过滤器应用于同一元素以实现此效果吗？或者还有另一种方法来实现这一目标吗？

码：

#object {    position: absolute;    left: 50%;    top: 50%;    margin-left: -211px;    margin-top: -120px;}.shadow {  -webkit-filter: drop-shadow(5px 5px white);}

解决方法 更新 Oh look I did something! ……我的回答仍然存在

所以,听起来你真正问的问题是“如何使用CSS为非方形图像添加笔划”,我的回答是 – 你不能.正如您已经发现的那样,看起来webkit能够通过过滤器but that won’t work on Firefox or IE实现一些不错的效果,所以我并没有真正看到进一步探索过滤器的重点(除非您的整个受众都在使用Webkit / Blink).

我的建议只是自己编辑图像.也许你可以招募一个服务器端库,如GD或ImageMagick(可能是糟糕的解决方案,但这就是我所知道的PHP)来处理自动化.

总结

以上是内存溢出为你收集整理的html – CSS过滤器,用于在对象周围创建实体边框全部内容，希望文章能够帮你解决html – CSS过滤器,用于在对象周围创建实体边框所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。