CSS - Как добавить эффект свечения вокруг бокса с жидкостью?

Question

Вот что я имею в виду: http://www.lesliesommer.com/wdw07/html/images/glow.png

Мне нужно это для работы с большинством браузеров.

Не могли бы вы указать мне учебник или что-то?

Спасибо заответы.Могу ли я сделать это без CSS3?

Answer 1

css3 box shadows я бы подумал. Они не реализованы в IE8

-webkit-box-shadow: 0px 0px 15px #dddddd;
-moz-box-shadow: 0px 0px 15px #dddddd;
box-shadow: 0px 0px 15px #dddddd;

Answer 2

Чтобы добавить ответ Groovetrain, если вы используете rgba вместо шестнадцатеричного значения, вы можете сделать так, чтобы цвета отображались с прозрачностью, позволяющей видеть то, что ниже, (что может быть или не быть полезным в зависимости от приложения).

-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.35);
box-shadow: 0px 0px 15px rgba(0,0,0,0.35);

Answer 3

Для этого есть несколько методов (за исключением CSS3).

Если ширина фиксирована, одним из способов является использование двух DIVS.У одного есть верх и бока.Вы должны сделать изображение очень высоким, с повторяющимися сторонами и обрезанным дном, и использовать его в качестве фона для внешнего DIV.Затем создайте изображение, которое содержит дно, и вложите его внутрь, и поместите его абсолютно вниз.

<div class="wrapper">
   ... content ...
   <div class="bottom"></div>
</div>

.wrapper {
    width:500px;
    background-image:url(....);
    position:relative;
}

.bottom {
   position:absolute;
   bottom:0px;
   height:20px;
   width:500px;
   background-image:url(....);
}

Если оно масштабируется по x / y, вы можете использовать метод с 9 срезами:

_|_|_
_|_|_
 | |

Вы нарезаете свой фон на 9 частей, где средняя часть пуста и содержит ваш контент.Вы делаете четыре угла и используете repeat-x / repeat-y для фона сторон.

Answer 4

http://www.css3.info/preview/box-shadow/

Однако требуется браузер с поддержкой CSS3.

В качестве альтернативы установите фоновое изображение, чтобы получить поддержку кросс-браузера: