html - 显示带有阴影效果的 PNG 的最佳方式？

Question

我有一个带有阴影效果的 PNG...因为我必须将图像作为一个 block 放在我的 CSS 中，而不是它本来的圆 Angular 矩形 - 我如何才能用阴影保持这种效果使用非白色背景？

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

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

我已经阅读了有关 shell 命令的内容，但是是否有一个 CSS 属性可以让我的 block 看起来像这样？谢谢!

Answer 1

但是等等!你完全可以在没有图像的情况下做到这一点。示例 here .它不是完全跨浏览器(IE < 9 不会处理圆 Angular 或框阴影)，但它非常接近您想要的。只需使用一些值来微调它。

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兼容方面，有一个很好的解决方案here .该站点上有更全面的文档，但基本上您下载 pie.htc，将其放在您的根文件夹中并在您的 CSS 中添加 behavior: url(pie.htc)文件。