å¨æµè§å¨éï¼å½é¼ æ ç¹å»æ使ç¨Tabé®è®©ä¸ä¸ªé¾æ¥æè
ä¸ä¸ªradioè·å¾ç¦ç¹çæ¶åï¼è¯¥å
ç´ å°ä¼è¢«ä¸ä¸ªè½®å»è线æ¡å´ç»ãè¿ä¸ªè½®å»è线æ¡å°±æ¯ outline ã
outline è½åè¯ç¨æ·é£ä¸ä¸ªå¯ä»¥æ¿åäºä»¶çhtmlå
ç´ è·åäºç¦ç¹ï¼å¯¹éç±é®çæä½çç¨æ·å°¤å
¶ææä¹ãä¸ä¸ªæ¸
æ°æ¦ç®çoutline设计è½æé«ä½¿ç¨è¡¨åçç¨æ·ä½éªã å¦ä¸æ¹é¢ï¼outline ä¹æäºè®¨åçå°æ¹ï¼æ¯å¦ä½¿ç¨CSS设计çTab(æ ç¾é¡µ)æ¶ï¼éæ©ä¸ä¸ªTabä¹åï¼Tabä¸çè½®å»è线ä¼ä¸ç´æ¾ç¤ºï¼æäºå½±åç¾è§ã
CSS ç outline å±æ§å
许æ们æ¹åè¿ä¸ªé»è®¤çè½®å»è线æ¡ææãå
¶é
å¥çç¸å
³å±æ§å
æ¬ï¼
outline
outline-width
outline-style
outline-color
outline-offset
å
¶ä¸ç¬¬ä¸ä¸ª outline æ¯éå(shorthand)å½¢å¼ï¼æ ¼å¼ä¸ºï¼ outline: outline-color || outline-style || outline-width
å¦ææ³è®©é¾æ¥è·åå°ç¦ç¹æ¶æ´éç®ï¼å¯ä»¥è®¾ç½®è½®å»çº¿æ¡ä¸ºçº¢è²ï¼outline å±æ§ç设计å¯è½å¦ä¸ï¼
a { outline-color: red; }
èå¦ææ³å»æå½±åç¾è§çTabä¸çè½®å»çº¿æ¡ï¼outlineå±æ§å¯å¦ä¸è®¾ç½®ï¼
.active-tab , img , a { outline: none;}
outline in browsers
ç´å°ææ°çIE7 beta2ï¼MSçIEè¿ä¸æ¯æ outline CSSå±æ§ï¼ä¸è¿IE为HTMLå
ç´ æ©å±äºä¸ä¸ª hideFoucs å±æ§ï¼ææè½è·å¾ç¦ç¹çå
ç´ å¦ææ·»å hideFoucs="true" å±æ§ï¼é£ä¹å®ä»¬è·å¾ç¦ç¹æ¶è线æ¡å°è¢«ä¸åºç°ãæ¯å¦MSDNéçä¾å:
<button>button with rectangle</button>
<!-- å
¶å®hideFocus="false"åhideFocus="true"ä¸æ ·çææï¼IEåªè¦åç°åå¨hideFocuså±æ§å³çæï¼è¿æ ·åæ¯ä¸ºäºå
¼ 容XHTMLçå±æ§å¿
é¡»æå¼çè§è -->
<button hideFocus="true">tton without rectangle</button>
Firefox1.5æä¾äºå
¨é¢çoutlineæ¯æãæ©æçFirefox 1.0.x çæ¬æ®è¯´å¯ä»¥ä½¿ç¨Mozillaçç¬ææ©å± -moz-outlineï¼ä¸è¿ææ³ç°å¨å ä¹æ¾ä¸å°ä»ä¹ä¸å级å°Firefox 1.5ççç±äºã å¦å¤Opera9 betaä¼¼ä¹è¿ä¸æ¯æã
æ´å¤æµè§å¨æ¯æä¿¡æ¯å¯ä»¥ä»QuirksMode æ¾å°ã
outline ä¸ border çåºå«
border å¯åºç¨äºå ä¹æææå½¢çhtmlå
ç´ ï¼è outline æ¯é对é¾æ¥ã表åæ§ä»¶åImageMapçå
ç´ è®¾è®¡ãä»èå¦ä¸ä¸ªåºå«ä¹å¯ä»¥æ¨çåºï¼é£å°±æ¯ï¼ outline çææå°éå
ç´ ç focus èèªå¨åºç°ï¼ç¸åºçç± blur èèªå¨æ¶å¤±ãè¿äºé½æ¯æµè§å¨çé»è®¤è¡ä¸ºï¼æ éJavaScripté
åCSSæ¥æ§å¶ã
å¦å¤ä» CSSçåå
«è¬æå·§ ä¸æä¸è¿è¯»å°çä¸ä¸ªåºå«å°±æ¯ï¼ outline ä¸ä¼è±¡borderé£æ ·å½±åå
ç´ ç尺寸æè
ä½ç½®ã
å»é¤ç¦ç¹è线ï¼
style="outline:medium none;" hidefocus="true"
温馨提示:答案为网友推荐,仅供参考