Мягкие края с использованием CSS?

Question

Я использую RGBA для создания прозрачного фона, который накладывается поверх изображения.Работает просто отлично.Мои вопросы таковы: есть ли способ «смягчить» края рамки так, чтобы они больше перетекали в изображение, чем твердые края.

Вот мой CSS для коробки:

#past{
    position:absolute;
    left:0;
    top:363px;
    background-color: rgba(34,34,34,0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);
    /* For IE 8*/
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);
    z-index:10;
    padding:10px;
}

Я знаю, что могу сделать это, создав фоновое изображение в Photoshop, но я искал способ CSS только против использования изображения.

Также я бы предпочел, если это вообще возможно, работать во всех браузерах.

Спасибо за помощь.=>

Answer 1

Другой вариант - использовать один из моих любимых инструментов CSS: box-shadow.

Тень от блока - это действительно тень на узле.Выглядит это так:

-moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
box-shadow: 1px 2px 3px rgba(0,0,0,.5);

Аргументы:

1px: Horizontal offset of the effect. Positive numbers shift it right, negative left.
2px: Vertical offset of the effect. Positive numbers shift it down, negative up.
3px: The blur effect.  0 means no blur.
color: The color of the shadow.

Итак, вы можете оставить свой текущий дизайн и добавить тень от блока:

box-shadow: 0px -2px 2px rgba(34,34,34,0.6);

Это должно дать вам размытый верхний край.

Этот сайт поможет с дополнительной информацией: http://css -tricks.com / snippets / css / css-box-shadow /

Answer 2

Это зависит от того, какой тип выцветания вы ищете.

Но с тенями и закругленными углами вы можете получить хороший результат.Закругленные углы, потому что чем больше тень, тем страннее она будет выглядеть по краям, если вы не уравновесите ее с закругленными углами.

http://jsfiddle.net/tLu7u/

также .. http://css3pie.com/

Answer 3

Вы можете использовать CSS-градиент - хотя они не одинаковы для разных браузеров, поэтому вам придется кодировать его для каждого

Вот так: CSS3 Прозрачность + Градиент

Градиент должен быть более прозрачным в верхнем или правом верхнем углу (в зависимости от возможностей)