关闭顶部展开顶部

DIV CSS布局实例:半透明阴影效果的实现_DIV+CSS实例

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!
  半透明阴影效果,非常简单,没有什么技术含量。但也是一点解决办法,假如不用绝对定位,在FF中比较麻烦。

  XHTML代码:

示例代码 [www.mb5u.com]
<div id="info">
<div id="login_t">test</div>
<div id="login_b"></div>

  CSS代码:

示例代码 [www.mb5u.com]
body {margin:100px;}
#login_b {width:200px;height:200px;background:#000;-moz-opacity:0.2; filter:alpha(opacity=20);margin:-30px 0 0 600px; position:absolute;}
#login_t { z-index:10;border:1px solid #006600;width:200px;height:200px;background:#FFF;margin:-35px 0 0 595px; position:absolute;}
#info{ background:#009900; height:155px;}

  查看运行效果:

代码调试框 [www.mb5u.com]

[ 可先修改部分代码 再运行查看效果 ]

来源:无忧整理//所属分类:DIV+CSS实例/更新时间:2007-05-28
相关DIV+CSS实例
闁汇埄鍨遍悺鏇綖閸℃稒鈷掓い鏇楀亾妞わ綇鎷�
婵炲濮崑鎾斥槈閺傝法澧涙俊鑼€濋柣銏╁灲閹凤拷
婵犵鈧啿鈧绱炲澶嬪殧鐎瑰嫭澹嗙换涔侀柣銏╁灲閹凤拷
婵犵鈧啿鈧绱炲澶婄闁诡垎鍕槬闁诲酣娼уΛ娑㈡偉閿燂拷
闂佺ǹ绻愰幊搴ㄥ焵椤掑倸甯堕幖瀛樼矒瀹曟繈鏁撻敓锟�
闂佺ǹ绻愰幊搴ㄥ焵椤掆偓閸氬绮婇敂鍓х煓閻庯絺鏅濋惌娆戠磽娓氬﹥瀚�
闂佽 鍋撴い鏍ㄧ☉閻︻噣鏌涘┑鎰胺缂併劍妞藉銊╊敍濞嗘垵绗¢梺鍝勫€婚幊鎾舵閿燂拷
闂佸搫鍟版慨椋庣礊婢舵劖鐓i悹杞拌濞层倕霉閿濆棙绀€闁告ɑ鐗犲畷鎰版晸閿燂拷
濠碘槅鍨崜婵嗩熆濡吋瀚绘い鎾寸箖鐎氾拷
婵犵鈧啿鈧绱炲鍥ㄥ妞ゆ挻绻冪€氳櫕淇婇妤€澧叉繝顫嫹
濠碘槅鍨崜婵嗩熆濮椻偓瀹曨剟顢欓崗鐓庘偓鐢告煛閸繄孝濠殿噯鎷�
濠碘槅鍨崜婵嗩熆濮椻偓閺屽懘鍩€椤掆偓閳诲酣骞戦幇闈涙闂佸搫瀚搁幏锟�
濠碘槅鍨崜婵嗩熆濮椻偓瀹曪綁骞嬪┑鍫紝
婵犵鈧啿鈧绱炲澶婄煑闁瑰瓨绻勯瀛樹繆椤栨澧叉繝顫嫹
闁诲骸鍘滈崜婵嬫偋閹惰棄鐭楀┑鐘插暙閼靛綊鏌ら懞銉ュ闁绘牭缍佸畷娆撴晸閿燂拷
UB闂佸湱绮崝妤呯嵁閸モ晜瀚氶悗娑櫳戦~锟�
闂佽壈椴稿濠氭焾鐎电硶鍋撻獮鍨仾婵犫偓閿燂拷
闁诲骸绠嶉崹鍝勶耿閸㈢嚜
闂佸憡姊绘慨椋庣礊婢跺瞼鍗氭繛鍡楀閸炲绻涚紙鐘哄厡闁稿骏鎷�
缂傚倷鐒﹂悷锕傚垂濠婂嫮顩锋い鎺嶇缁插湱鈧偣鍊濈紓姘额敊閿燂拷
©2017 www.mb5u.com濠碘槅鍨崜婵嗩熆濮椻偓瀵噣鎮╅幓鎺撳瘶
闂佽 鍋撻柟顖滃椤ワ拷&闂佸憡甯掑Λ鏃堟閿燂拷