прозрачные границы с css 3

Question

Есть ли способ сделать границы элемента полупрозрачными? используя чисто css? как модальное окно, которое использует facebook?

Answer 1

Вы можете использовать rgba() таким образом, что background-color: rgba(255,0,0,0.5); такое же, как background-color: rgb(255,0,0); opacity: 0.5;

для вашей границы, сделать что-то вроде этого border: 3px solid rgba(255,0,0,0.3);

http://jsfiddle.net/robert/b3e3v/

Answer 2

Используйте два дивы ... один за границы другого для внутренней области. Затем установите цвет фона внешнего DIV иметь значение прозрачности:

background-color:rgba(0,0,0,0.5); 

Answer 3

Ну, вы можете сделать это в хаком образом. Вот статья о том, как сделать прозрачные/полупрозрачные границы вокруг секции заголовка:

Transparent borders

Answer 4

RGBA только половина ответа, другая половина фон-клип. Смотрите здесь: http://css-tricks.com/transparent-borders-with-background-clip/

Answer 5

<div id="lightbox"> 
/* Set transparent background with PNG 
    add padding to push inside box inward */ 

    <div id="lightbox-inside"> 
    /* Set white background in here */ 
    </div> 

</div> 

2 дивы означает надлежащее compadibility. просто не забудьте установить свою непрозрачность (например, для всех и т. д.)

Answer 6

Да, вы можете достичь этого очень легко! Используйте этот код:

border: 14px solid rgba(0,0,0,0.50); 

Где 0.50 - непрозрачность!

Надеюсь, это поможет!