显示带阴影效果的PNG的最佳方法是什么？

Question

我有一个PNG,它有一个阴影影响...因为我必须将图像作为一个块放在我的CSS中,而不是它的圆角矩形 - 我怎么能保持这种效果与阴影一起工作非白色背景？

现在我每个都有一个简单的笔触和阴影效果:

http://i.imgur.com/3hZIq.png

我已经阅读了有关shell命令的内容,但是有一个CSS属性允许我允许我的块看起来像这样吗？谢谢!

Answer 1

可是等等!你可以完全没有图像.这里的例子.它不是完全跨浏览器(IE <9不会处理圆角或框阴影),但它非常接近你想要的.只需使用一些值来微调它.

div
{
    width: 300px;
    height: 100px;
    border: 3px solid #0088ff;
    border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    padding: 10px;
    box-shadow: 5px 5px 5px 5px #888;
    -ms-box-shadow: 5px 5px 5px 5px #888;
    -moz-box-shadow: 5px 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px 5px #888;
}

在IE浏览器兼容性方面,有一个很好的解决方案在这里.网站上有更全面的文档,但基本上您下载pie.htc,将其放在根文件夹中并添加behavior: url(pie.htc)到CSS文件中.