Q

與CSS的透明邊界3

2010-10-15 122 views 2 likes

2

有沒有辦法使元素的邊界半透明？使用純粹的CSS？像Facebook使用的模式窗口？與CSS的透明邊界3

2010-10-15 Rana

A

回答

3

您可以使用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/

2010-10-15 20:05:57 Robert

+0

角落是怎樣變黑的？ – Rana 2010-10-17 01:17:00

+0

由於瀏覽器呈現邊框的方式，它就像這樣在底部重疊。 – Robert 2010-10-17 02:08:01

+0

@Rena：Webkit與邊界重疊，而Firefox則沒有。您可以通過給它一個等於邊框寬度的邊框半徑來隱藏它。這似乎改變了它自己繪製的方式。 – nickf 2011-05-05 09:54:23

1

使用兩個div ......一個爲其他邊界爲內部區域。然後設置外層div的背景顏色有透明值：

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

2010-10-15 20:06:24 user268137

0

那麼，你可以做一個hackish的方式。下面是關於如何使周圍頭部分透明/半透明邊框的文章：

Transparent borders

2010-10-15 20:08:20

2

RGBA只有一個答案的一半，另一半是背景剪輯。看到有：http://css-tricks.com/transparent-borders-with-background-clip/

2010-10-15 20:14:04 Rimantas

0

<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裝置正確compadibility。只記得設置你的不透明度（分別爲ie和所有其他）

2010-10-17 01:05:55 thatmiddleway

+0

...但不是IE6。 – Pedery 2010-10-17 01:10:58

+0

呃...我之前把ie6從我的虛擬機中拿出來...... – thatmiddleway 2010-10-17 01:31:34

0

是的，你可以很容易實現！使用此代碼：

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

其中0.50是不透明度！

希望它有幫助！

2011-12-24 12:59:11 Ahsan

相關問題