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;相同background-color: rgb(255,0,0); opacity: 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只是答案的一半，另一半是背景片段。 看到那里： http : //css-tricks.com/transparent-borders-with-background-clip/

Answer 3

使用兩個div ...一個作為邊框，另一個作為內部區域。 然后將外部div的背景色設置為具有透明度值：

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

Answer 4

好吧，您可以采用駭客的方式進行操作。 這是有關如何在標題部分周圍制作透明/半透明邊框的文章：

透明邊框

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 divs表示適當的兼容性。 只是記得要設置您的不透明度（分別用於ie和所有其他）

Answer 6

是的，您可以輕松實現這一目標！ 使用此代碼：

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

0.50是不透明度！

希望能幫助到你！