Лучший способ отобразить PNG с эффектом тени? - PullRequest
Новая
       15

Лучший способ отобразить PNG с эффектом тени?

2 голосов
/ 05 октября 2011

У меня есть PNG, который влияет на тень ... Так как мне нужно поместить изображение в моем CSS как блок, а не закругленный прямоугольник, как это есть - как я могу сохранить этот эффект с теньюработа с не белым фоном?

Прямо сейчас у меня есть простой эффект обводки и теней здесь:

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

Я читал о командах оболочки, но есть ли свойство CSSчто позволит мне сделать так, чтобы мой блок выглядел так?Спасибо!

1 Ответ

5 голосов
/ 05 октября 2011

Но подождите! Вы можете сделать это полностью без изображений. Пример здесь . Это не полностью кросс-браузер (IE <9 не будет обрабатывать закругленные углы или тень от рамки), но это очень близко к тому, что вы хотите. Просто поиграйте с некоторыми значениями, чтобы точно настроить его. </p> 

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-файл.

...