CSSÂ˾µ±Ê¼Ç °üº¬LightÂ˾µ·½·¨µÄʹÓÃ
Alpha
1. Óï·¨: {filter: alpha(opacity=opacity, finishopacity=finishopacity, style=style, startx=startx, starty=starty, finishx=finishx, finishy=finishy)}
2. ÒâÒå: °ÑÒ»¸öÄ¿±êÔªËØÓë±³¾°»ìºÏ, ÉèÖÃÕß¿ÉÒÔÖ¸¶¨ÊýÖµÀ´¿ØÖÆ»ìºÏµÄ³Ì¶È
3. ÊôÐÔ
3.1. opacity: ͸Ã÷¶Èˮƽ, 0ΪÍêȫ͸Ã÷, 100ΪÍêÈ«²»Í¸Ã÷
3.2. finishopacity: ½¥±äµÄ͸Ã÷Ч¹û, ÓÃÀ´¿ØÖƽáÊøʱµÄ͸Ã÷¶È.
3.3. styleÖ¸¶¨ÁË͸Ã÷ÇøÓòµÄÐÎ×´ÌØÕ÷, ÆäÖÐ0´ú±íͳһÐÎ×´, 1´ú±íÏßÐÍ, 2´ú±í·ÅÉä×´, 3´ú±í³¤·½ÐÎ
3.4. startxºÍstarty: ´ú±í½¥±ä͸Ã÷Ч¹ûµÄ¿ªÊ¼xºÍy×ø±ê
3.5. finishxºÍfinishy: ´ú±í½¥±ä͸Ã÷Ч¹ûµÄ½áÊøxºÍy×ø±ê
Blur
1. Óï·¨:
1.1. HTML: {filter: blur(add=add, direction=direction, strength=strength)}
1.2. ½Å±¾: [oblurfilter=]obj.filters.blur
2. ÒâÒå: ÓÃÊÖÖ¸ÔÚÒ»¸±ÉÐδ¸É͸µÄÓÍ»ÉÏ»®¹ý²úÉúµÄÄ£ºýЧ¹û
3. ÊôÐÔ
3.1. add: ²¼¶ûÖµ, ĬÈÏtrue, Ö¸¶¨Í¼Æ¬ÊÇ·ñ±»¸Ä±ä³ÉÓ¡ÏóÅɵÄÄ£ºýЧ¹û. Ä£ºýЧ¹û°´Ë³Ê±Õë·½Ïò½øÐÐ.
3.2. direction: ÉèÖÃÄ£ºýµÄ·½Ïò, 0¶È´ú±í´¹Ö±ÏòÉÏ, È»ºóû45¶ÈΪһ¸öµ¥Î», ĬÈÏÖµÊÇÏò×ó270¶È
3.3. strength: ÕûÊý, ´ú±íÓжàÉÙÏñËصĿí¶È½«Êܵ½Ä£ºýÓ°Ïì, ĬÈÏÊÇ5.
3.4. ¶ÔÓÚÍøÒ³ÉϵÄÎÄ×Ö, Èç¹ûÉèÖÃÄ£ºýadd=1, ×ÖÌå»áÓÐÒ»¸öÒõӰЧ¹û.
FlipH, FlipV
1. Óï·¨: {filter: fliph}, {filter: filipv}
2. ÒâÒå: ˮƽ·´×ªºÍ´¹Ö±·´×ª
Chroma
1. Óï·¨: {filter: chroma(color=color)}
2. ÒâÒå: ÉèÖÃÒ»¸ö¶ÔÏóÖÐÖ¸¶¨µÄÑÕɫΪ͸Ã÷É«
3. ÊôÐÔ
3.1. color: Ҫ͸Ã÷µÄÑÕÉ«
DropShadow
1. Óï·¨: {filter: dropshadow(color=color, offx=offx, offy=offy, positive=positive);}
2. ÒâÒå: Ìí¼Ó¶ÔÏóµÄÒõӰЧ¹û.
3. ¹¤×÷ÔÀí: ½¨Á¢Ò»¸öÆ«ÒÆÁ¿, ¼ÓÉϽÏÉî.
4. ÊôÐÔ:
4.1. color: ͶӰµÄÑÕÉ«
4.2. offxºÍoffy: x·½ÏòºÍy·½ÏòÒõÓ°µÄÆ«ÒÆÁ¿
4.3. positive: ²¼¶ûÖµ, true´ú±íΪÈκηÇ͸Ã÷ÏñËؽ¨Á¢¿É¼ûͶӰ, false´ú±íΪ͸Ã÷ÏñËز¿·Ö½¨Á¢Í¸Ã÷Ч¹û
Glow
1. Óï·¨: {filter: glow(color=color, strength=strength);}
2. ÒâÒå: ±ßÔµ·¢¹âЧ¹û
3. ÊôÐÔ
3.1. color: ·¢¹âÑÕÉ«
3.2. strength: ·¢¹âÇ¿¶È, 1-255
Gray
1. Óï·¨: {filter: gray};
2. ÒâÒå: ½«Í¼Æ¬±ä³É»Ò¶Èͼ
Invert
1. Óï·¨: {filter: invert}
2. ÒâÒå: ½«¶ÔÏóµÄ¿ÉÊÓ»¯ÊôÐÔÈ«²¿·´×ª, °üÀ¨É«²Ê, ±¥ºÍ¶È, ÁÁ¶È
Xray
1. Óï·¨: {filter: xray}
2. ÒâÒå: ÈöÔÏó·´Ó³³öËüµÄÂÖÀª²
Ïà¹ØÎĵµ£º
ÏÖÔÚÍøÕ¾»»Æ¤·ôÊDZȽϳ£¼ûµÄ¹¦ÄÜ£¬´ó¶àÊýÂÛ̳¶¼Óеģ¬ÒªÏëʵÏÖÕâÑùЧ¹û¿ÉÒÔ¿´ÈçÏ´úÂ룺Html´úÂ벿·Ö:
1.ÒªÓÐÒ»¸ö´øidµÄÑùʽ±íÁ´½Ó,ÎÒÃÇҪͨ¹ý²Ù×÷Õâ¸öÁ´½ÓÀ´µ÷Óò»Í¬µÄhref.
<link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" />
2.Ƥ·ôÑ¡Ôñ°´Å¥(ºǫ́Ϊÿ¸öliÌí¼Óonclickʼþ,´¥·¢»»· ......
´¹Ö±¾ÓÖжԱí¸ñÀ´ËµÊÇС²ËÒ»µú£¬Ö»ÐèÖ¸¶¨µ¥Ôª¸ñΪvertical-align: middle¼´¿É£¬
µ«ÕâÔÚcss²¼¾ÖÖв»¹ÜÓ᣼ÙÉèÄ㽫һ¸öµ¼º½²Ëµ¥µÄ¸ß¶ÈÉèΪ2em£¬
È»ºóÔÚcssÖÐÖ¸¶¨´¹Ö±¶ÔÆëµÄ¹æÔò£¬ÎÄ×Ö»¹ÊǻᱻÅŵ½ºÐµÄ¶¥²¿£¬¸ù±¾Ã»ÓÐʲôÇø±ð¡£
Òª½â¾öÕâÒ»ÎÊÌ⣬ֻÐ轫ºÐµÄÐиßÉèΪÓëºÐµÄ¸ß¶ÈÏàͬ¼´¿É£¬
ÒÔÕâ¸öÀý×ÓÀ´Ëµ£¬ºÐ¸ß2em,ÄÇôֻР......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Ò»¸ö±È½Ï²»´íµÄC ......
Ч¹ûͼ£º
csstest.css
*{
margin-left:0;
margin-top:0;
font-size:12px;
color:White;
}
#biaoge
{
/*¶ÔIDΪbiaogeµÄ±êǩʹÓôËCSS*/
width:405px; /*Áпí100£¬¼ÓÉÏÎå¸öΪ1µÄ±ß¾à£¬ËÄÁоÍÊÇ405*/
&nbs ......
magento¸ö±ðÒ³ÃæÌí¼ÓcssºÍjsÎļþ£¬¿ÉÒÔ½«Æä·ÅÔÚ¸ö±ðÒ³ÃæµÄxmlÖУ¬»òÕß·ÅÔÚCMSµÄlayout updateÖУ¬Æä´úÂëºÍÎļþ´æ·ÅλÖÃÈçÏÂ
<reference name="head">
<action method="addCss"><stylesheet>css/mystyles.css</stylesheet></action>
//Ìí¼Ócss mystyles.css ÎļþÔÚ /skin/frontend/Ö÷Ìâ ......