Ò׽ؽØͼÈí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö160KB

cssÖеÄfilterÊôÐÔÓ﷨˵Ã÷

¸Õ¿ªÊ¼Ñ§css£¬¿ªÊ¼Óöµ½filter²»¶®Ê²Ã´Òâ˼ºóÀ´µ½ÍøÉϲéÁË£¬¾õµÃ½âÊ͵ĺÜÈ«Ã棬¾Í°ÑËü¿ÙÏÂÀ´£¬ÒÔ±ã×Ô¼º¾­³£À´¿´¿´¡£
CSSÂ˾µµÄʹÓ÷½·¨£ºfilter:filtername(parameters)¡¡¼´ filter:Â˾µÃû³Æ£¨²ÎÊý£©
alpha£ºÉèÖÃ͸Ã÷²ã´Î
blur£º´´½¨¸ßËÙ¶ÈÒƶ¯Ð§¹û£¬¼´Ä£ºýЧ¹û
chroma£ºÖÆ×÷רÓÃÑÕɫ͸Ã÷
DropShadow£º´´½¨¶ÔÏóµÄ¹Ì¶¨Ó°×Ó
FlipH£º´´½¨Ë®Æ½¾µÏñͼƬ
FlipV£º´´½¨´¹Ö±¾µÏñͼƬ
glow£º¼Ó¹â»ÔÔÚ¸½½ü¶ÔÏóµÄ±ßÍâ
gray£º°ÑͼƬ»Ò¶È»¯
invert£º·´É«
light£º´´½¨¹âÔ´ÔÚ¶ÔÏóÉÏ
mask£º´´½¨Í¸Ã÷ÑÚĤÔÚ¶ÔÏóÉÏ
shadow£º´´½¨Æ«Òƹ̶¨Ó°×Ó
wave£º²¨ÎÆЧ¹û
Xray£ºÊ¹¶ÔÏó±äµÃÏñ±»x¹âÕÕÉäÒ»Ñù
¾ßÌåµÄÓ¦ÓÃÓÐÁ½ÖÖ·½·¨£º
1¡¢Ïȶ¨ÒåºÃCSS £¬ÔÙÔÚÒ³ÃæÖÐÐèÒªµÄ¶ÔÏóÉÏʹÓÃÔ¤Ïȶ¨ÒåºÃµÄCSS£¬Êµ¼ÊÉÏCSSµÄÉèÖöԻ°¿òÀïÒѾ­Ô¤ÏȽ«ÕâЩÂ˾µµÄÓï·¨ÉèÖúÃÁË£¬ÎÒÃÇÖ»ÐèÌîÉÏÊʺϵľßÌå²ÎÊý¼´¿É¡£
2¡¢Ö±½ÓÔÚÖ§³ÖCSSÂ˾µÐ§¹ûµÄHTML¿Ø¼þÔªËØÉϱàдCSS filter´úÂë¡£
AlphaÂ˾µ: Ìýµ½Õâ¸öÃû×Ö£¬Äã¿ÉÄÜ»áÏëµ½FlashÀïÓУ¬PhotoshopÀïÒ²Ëƺõ¼û¹ý¡£Ò»µã²»´í£¬ËüÃǵÄ×÷Óûù±¾ÀàËÆ£¬¾ÍÊÇ°ÑÒ»¸öÄ¿±êÔªËØÓë±³¾°»ìºÏ¡£Äã¿ÉÒÔÖ¸¶¨ÊýÖµÀ´¿ØÖÆ»ìºÏµÄ³Ì¶È¡£ÕâÖÖ“Óë±³¾°»ìºÏ"ͨË×µØ˵¾ÍÊÇÒ»¸öÔªËصÄ͸Ã÷¶È.
Óï·¨£ºSTYLE="filter: Alpha(Opacity=opacity, FinishOpacity=finishopacity£¬Style=style, StartX=startX£¬StartY=startY£¬FinishX=finishX£¬FinishY=finishY)"
˵Ã÷£º
Opacity£ºÆðʼֵ£¬È¡ÖµÎª0¡«100, 0Ϊ͸Ã÷£¬100Ϊԭͼ¡£
FinishOpacity£ºÄ¿±êÖµ¡£
Style£º1»ò2»ò3
StartX£ºÈÎÒâÖµ
StartY£ºÈÎÒâÖµ
Àý×Ó£ºfilter:Alpha(Opacity="0″,FinishOpacity="75″,Style="2″)
BlurÂ˾µ:ÊÇCSSµÄÂ˾µÖ®Ò»£¬°ÑËü¼ÓÔص½ÎÄ×ÖÉÏ£¬¿É²úÉúÁ¢Ìå×ÖµÄЧ¹û£¬Õ⽫ΪÄãÔÚÍøÒ³ÉÏʹÓÃÁ¢Ìå×Ö×ö±êÌâ´øÀ´Á˼«´óµÄ·½±ã£¬Ò²ÎªÄãµÄÍøÒ³¼õÇáÁË·ÖÁ¿£»°ÑBlurÂ˾µ¼ÓÔص½Í¼Æ¬ÉÏ£¬ÄÜʹÄãµÄͼƬÔöÉ«²»ÉÙ£¬ËäÈ»ÓÃͼÏó´¦ÀíÈí¼þÒ²ÄܴﵽͬÑùЧ¹û£¬µ«ÓÃBlurÂ˾µ¿É·½±ã¶àÁË.
Óï·¨£ºSTYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
˵Ã÷£º
Add£ºÒ»°ãΪ1£¬»ò0¡£
Direction£º½Ç¶È£¬0¡«315¶È£¬²½³¤Îª45¶È¡£
Strength£ºÐ§¹ûÔö³¤µÄÊýÖµ£¬Ò»°ã5¼´¿É¡£
Àý×Ó£ºfilter:Blur(Add="1″,Direction="45″,Strength="5″)
ChromaÂ˾µ:ÉèÖöÔÏóµÄÉ«²ÊŨ¶È
Óï·¨£ºSTYLE="filter:Chroma(Color = color)"
˵Ã÷£ºcolor£º#rrggbb¸ñʽ£¬ÈÎÒâ¡£
Àý×Ó£ºfilter:Chr


Ïà¹ØÎĵµ£º

¡¾×ª¡¿Div CSS²¼¾ÖµÄÊ®ÁùÌõ¼¼Çɼ°ÏêϸÓ÷¨ DivCSS½Ì³Ì

1¡¢IE·Ö²»Çå¼Ì³Ð¹ØϵºÍ¸¸×Ó¹ØϵµÄ²î±ð£¬È«²¿¶¼ÊǼ̳йØϵ¡£
2¡¢ÔÚ¸øÄãµÄ±êÇ©·è¿ñ¼ÓÑ¡Ôñ·ûµÄʱºò£¬±ðÍüÁËÔÚCSSÀï¸øÑ¡Ôñ·û¼ÓÉÏ×¢ÊÍ¡£µÈÄãÒÔºóÐÞ¸ÄÄãµÄCSSµÄʱºò¾ÍÖªµÀΪʲôҪÕâô×öÁË¡£ÁíÍâÌáÐÑÄú£¬²»ÒªÌ«·è¿ñÁË¡£
3¡¢Èç¹ûÄã¸øÒ»¸ö±êÇ©ÉèÖÃÁËÒ»¸öÉîÉ«µ÷µÄ±³¾°Í¼Æ¬ºÍÁÁÉ«µ÷µÄÎÄ×ÖЧ¹û¡£½¨ÒéÕâ¸öʱºò¸øÄãµÄ±êÇ©ÔÙÉèÖÃÒ»¸öÉî ......

css¼æÈÝIE8


<meta http-equiv="x-ua-compatible" content="ie=7" />
IE6¡¢IE7¡¢FirefoxµÈä¯ÀÀÆ÷µÄ¼æÈÝÐÔÎÊÌâÈÃÍøÒ³Éè¼ÆʦÃÇ´óÉËÄԽ±¾À´ÍøÒ³Éè¼ÆÊǼþºÜÓÐȤµÄÊÂÇ飬µ«ÊÇÈ´±»Õâ¶àÓà¼æÈݹ¤×÷ÉËÄԽÌرðÊÇÈÃÈËÍÙÆúµÄIE6£¬¶àÉÙÈËÏëÈÃËüÏûʧ£¬¿ÉÊÇËü¾ÍÊÇÏûʧ²»ÁË£¬Î¢Èí»¹Ëµ²»»áÍ£Ö¹¶ÔIE6£¬Õæ¹»ÓôÃƵġ£
   &n ......

css¶¨¿í,js»»±³¾°£¬È¥Á´½ÓºóµÄ½¹µãÐéÏß¿ò£¬

1.span  µÄ overflow :hidden  width:70px  ; display:block(Ò»µãÒª¼ÓÉÏdivµÄ»°²»Óüӣ©
2.js¶¯Ì¬»»±³¾°,»»±³¾° style.backgroundImage = "url('images/bg1.jpg')";
3.ÓÃonFocus="this.blur()"À´Ïû³ýÁ´½ÓºóµÄ½¹µãÐéÏß¿ò
4. onMouseOver  onMouseOut onClick  Èý¸öʱ¼äÔÚÒ» ......

CSSËټǿھ÷

Èç¹ûÔÚÓÃCSSÉè¼Æ²¼¾ÖʱÓöµ½BUG£¬ÇëÈÏÕæÔĶÁÒÔÏÂÄÚÈÝ£¬·Ç³£ÈÝÒ×¼ÇÒäµÄ£¬²»ÖªµÀÄÄλ¸ßÈË°ÑCSS BUG±à³ÉÁË˳¿ÚÁïÁË£¡¿´¿´ºÃ²»ºÃ¼ÇסÄØ£¿ Ò»¡¢IE±ß¿òÈôÏÔÈôÎÞ£¬Ðë×¢Ò⣬¶¨ÊǸ߶ÈÉèÖÃÒÑÍü¼Ç£» ¶þ¡¢¸¡¶¯²úÉúÓÐÔµ¹Ê£¬ÈôÒª¸¸²ã°üº¬×¡£¬½ô¸ú¸¡¶¯ÒªÇå³ý£¬
Èç¹ûÔÚÓÃCSSÉè¼Æ²¼¾ÖʱÓöµ½BUG£¬ÇëÈÏÕæÔĶÁÒÔÏÂÄÚÈÝ£¬·Ç³£ÈÝÒ×¼ÇÒäµÄ£¬²»ÖªµÀÄ ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØͼ | ¸ÓICP±¸09004571ºÅ