自從在網站上使用了彈出層以後，一直想給他套一個漂亮的半透明邊框。
思路一：在彈出層外面再套一個Div，設定他的背景為黑色，然後使用css濾鏡設定他的透明度，padding為5個像素，這樣就ok了。
頁面結構：
<div id="windowBgBorder"><br /><div id="windowTitle"></div><br /><div id="windowContent"></div><br /></div>
豈料不行，設定外面的大的Div為透明後，裡面的Title和Content也都變得透明了，顯然這不是我要的效果。
很明顯透明屬性被它裡面的兩個Div繼承了，導致裡面也透明了，把裡面的div的透明重寫一下，寫為不透明應該就可以了，重寫，豈料還是不行，沒有任何反應，怎麼辦？貌似走進了一個死胡同。
pass掉吧。。。
再想
思路二：既然透明層裡面的內容也會被設定為透明，那麼何不設定一個空的div，讓他絕對位置，高度和寬度都比彈出層要大幾個像素，那麼看起來就像是彈出層有了一個透明的邊框，儘管這其實是一個假的邊框哈哈。。。
頁面結構改為：
<div id="window"><br /><div id="windowBgBorder"></div><br /><div id="windowTitle"></div><br /><div id="windowContent"></div><br /></div>
這樣子就搞定了O(∩_∩)O哈哈~
看代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>帶透明邊框的層</title><br /><mce:style type="text/css"><!--<br />#window {width:300px; height:200px; position:relative; margin:0 auto}<br />#windowBgBorder {<br />width:310px;<br />height:210px;<br />position:absolute;<br />left:-5px;<br />top:-5px;<br />background-color:#000000;<br />-moz-opacity:0.3; /*for ff*/<br />opacity:0.3; /*for ff3.5+ css3.0標準的*/<br />filter:alpha(opacity=30);<br />z-index:900;<br />}<br />#windowTitle { background-color:#333333; width:100%; height:30px; color:#FFFFFF; z-index:1000;}<br />#windowContent { background-color:#333333; width:100%; height:170px; color:#FFFFFF; z-index:1000;}<br />--></mce:style><style type="text/css" mce_bogus="1">#window {width:300px; height:200px; position:relative; margin:0 auto}<br />#windowBgBorder {<br />width:310px;<br />height:210px;<br />position:absolute;<br />left:-5px;<br />top:-5px;<br />background-color:#000000;<br />-moz-opacity:0.3; /*for ff*/<br />opacity:0.3; /*for ff3.5+ css3.0標準的*/<br />filter:alpha(opacity=30);<br />z-index:900;<br />}<br />#windowTitle { background-color:#333333; width:100%; height:30px; color:#FFFFFF; z-index:1000;}<br />#windowContent { background-color:#333333; width:100%; height:170px; color:#FFFFFF; z-index:1000;}</style><br /></head><br /><body><br /><div id="test" style="width:600px; height:600px; padding-top:50px; background-color:#00FF99;"><br /><div id="window"><br /><div id="windowBgBorder"></div><br /><div id="windowTitle">標題</div><br /><div id="windowContent">我是內容<br />我是內容<br />我是內容</div><br /></div><br /></div><br /></body><br /></html><br />
完整彈出層下載
，我用了tipswindown外掛程式外掛程式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
