Best way to display a PNG with a drop shadow effect on it?
I have a PNG that has a drop shadow affect on it...Since I have to place the image 开发者_开发知识库in my CSS as a block, rather than the rounded rectangle that it is - how can I maintain that effect with the shadow working with the non-white background?
Right now I have a simple stroke and drop shadow effect to it per here:
http://i.imgur.com/3hZIq.png
I have read about shell commands, but is there a CSS property that will allow me to allow my block to look like this? Thanks!
But wait! You can do this entirely without images. Example here. It's not completely cross browser (IE < 9 won't handle rounded corners or box shadow), but it's very close to what you want. Just play around with some values to fine tune it.
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;
}
In terms of IE compatibility, there's a good solution here. There are more comprehensive docs on the site, but essentially you download pie.htc
, put it in your root folder and add behavior: url(pie.htc)
in your CSS file.
精彩评论