background-clip å background-origin æ¯ CSS3 ä¸æ°å ç background module å±æ§ï¼ç¨æ¥ç¡®å®èæ¯çå®ä½ã
background-clip ç¨æ¥å¤æ background æ¯å¦å
å« border åºåãè background-origin
ç¨æ¥å³å® background-position 计ç®çåèä½ç½®ã
è¯æ³ä¸ºï¼
background-clip: [border | padding] [, [border | padding]]*
background-origin: [border | padding | content] [, [border |
padding | content]]*
å¯¹äº background-clipï¼
å¦ææ¯
padding å¼ï¼å background å¿½ç¥ paddingè¾¹ç¼ï¼border æ¯éæçãå¦ææ¯ border å¼ï¼åbackground å
æ¬
border åºåãå¦æ background-image å¾çæå¤ä¸ªï¼å¯¹åºç background-clip å¼ä¹é´ç¨éå·åéã
å¯¹äº background-originï¼
å¦ææ¯
padding å¼ï¼å position ç¸å¯¹äº padding è¾¹ç¼ï¼"0 0" 为 padding è¾¹ç¼çå·¦ä¸è§ï¼è "100% 100%"
为å³ä¸è§ï¼ãå¦ææ¯ border å¼ï¼åæå³çç¸å¯¹ border è¾¹ç¼ãè border å¼åç¸å¯¹äºå
容边ç¼ãä¸ background-clip
ç¸åï¼å¤ä¸ªå¼ä¹ç¨éå·åéãå¦æ background-clip æ¯ padding å¼ï¼background-origin æ¯ border å¼ï¼å¹¶ä¸
background-position æ¯ "top left"ï¼é»è®¤åå§å¼ï¼ï¼åèæ¯å¾å·¦ä¸è§å°ä¼è¢«æªåæé¨åã
è¿ä¸¤ä¸ªå±æ§ä»
ä» CSS3 æåºç°ï¼å¨æªä½¿ç¨è¯¥å±æ§ background module ä¸çé»è®¤è¡¨ç°åå¦ä½å¢ï¼
background-clip é»è®¤ç±»ä¼¼äº background-clip:borderã
background-origin é»è®¤ç±»ä¼¼äº background-origin:paddingã
ä½ IE åæ¯ç¹ä¾ ï¼It sucksï¼ã
å¨ IE6 ãIE7 ä¸ï¼ä¸è¬å
ç´ ï¼button çé¤å¤ï¼çèæ¯ç¸å½äºï¼background-clip:border;
background-origin:border;
è hasLayout çå
ç´ ï¼å ä¸ button
çï¼çèæ¯åç¸å½äºï¼background-clip:padding; background-origin:padding;
è¿ä¸å¯¹ CSS3 å±æ§å·²å¨ Mozilla, Safari 3 å Konqueror
çæµè§å¨ä¸å®ç°ï¼ä¸è¿é½æ¯éè¿å
¶ç§æå±æ§ç表达æ¹å¼ã
温馨提示:答案为网友推荐,仅供参考