прозрачные границы с 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

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

Answer 3

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

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

Answer 4

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

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

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

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

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 div означает правильную совместимость. просто не забудьте установить непрозрачность (для ie и для всех остальных соответственно)

Answer 6

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

Прозрачные границы