Re: Ãä®Ø¤å¦rªº¸Ñªk - element() vs. ·s¨ç¼Æ text-image() vs. ·sÄÝ©Ê border-character ¡H

°w¹ï border-character¡Aborder ¤W­±¥i¯à¤£¥u¤@­Ó¦r¡A§Ú¦³¬Ý¹L¼g WARNING ¨ººØ¡C©Î³\¥i¥H¦³
border-text ©Î¬O border-content ³oºØ¤£­­¤@­Ó¦rªº§t·N¡C

¡]ÁÂÁ Kenny ¥S§iª¾§Ú¨S¦³µo¨ì¸s²Õ¤W¡A¯u¬O©êºp...¡^

¦b 2011¦~4¤ë5¤é¤U¤È7:39¡AKang-Hao (Kenny) Lu <kennyluck@w3.org> ¼g¹D¡G
> ©êºp¡A¦A¨Ó¤@­Ó CSS ªº°Q½×¡C
>
> ¤W©P OSDC.tw Å¥ ericsk ¸ò¹j¤Ñ§Ú­Ìªº Swick ¥ý¥Í¦b W3C ²`¦`ºtÁ¿ªº®É­Ô¡A¨ä
> ¹ê§Ú³£¨S¦b±M¤ßÅ¥¡A³£¦b¬ã¨s³o­Ó°ÝÃD¡C
>
> °ÝÃD¬O³o¼Ëªº¡A¦³¨Ç¤H¡A¤ñ¦p»¡ CSS ¤u§@²Õ­«ÂI¤Hª« fantasai ¤j¤p©j¡A²ßºD¦b
> ¥Î¯Â¤å¦r¶l¥ó´y­z CSS ³W½d§ó°Ê´£®×ªº®É­Ô¡A¤@¬q¤å¦rªº¥ªÃä¥Î¤£¦PªºÃä®Ø¤å¦r
> ­×¹¢¡A¨Ó¥Nªí­þ¨Ç¬O§ïÅÜ«eªº³W½d¤å¦r¡A­þ¨Ç¬O«á¨Óªº³W½d¤å¦r¡CÁ|­Ó¨Ò¤l¡G
>
> # HTML5 ¤¤¤å¿³½ì¤p²Õ¬°¥D®u¬°§f±d»¨¡AW3C
> # ³sµ¸¤H¬°Á¤lÙy¡AIRCÀW¹D¬°W3C IRC¦øªA¾¹
> # ªºhtml5-ko¡C
>
> v.s
>
> | HTML5 ¤¤¤å¿³½ì¤p²Õ¬°¥D®u¬°Á¤lÙy¡AW3C
> | ³sµ¸¤H¬°§f±d»¨¡AIRCÀW¹D¬°W3C IRC¦øªA¾¹
> | ªºhtml5-jp¡C
>
> ¥t¥~¥i¥H·Q¹³«Ü¦hºØ§Q¥Î¡A¤ñ¦p»¡¥i¥H®³¥xÆWºô¥Á«Ü³ßÅw¥Îªº¡uÊj¡v·í§@Ãä®Ø©Î¬O
> ®³¤@¨ÇÃC¤å¦r·í§@ border-image ¨Ó¥Î¡CºJ¶} 'white-space: pre' ³oºØ¤£¯à´«¦æ
> ªº¸Ñªk¤£½Í¡A³oºØ±¡ªp¥Î²{¦b³W½d¤W¦³ªº§Þ³N­n«ç»ò¸Ñ©O¡H©Î¬O»Ý­n·sªº CSS ÄÝ
> ©Ê©O¡H
>
> ¦b¬ã¨s¤F¤@¬q®É¶¡¤§«á¡Aµo²{¨ìÁöµM«D±`ªºÁà¡A¦ý¬O²{¦bªº³W½d¤W¬O¦³¸Ñªkªº¡I
>
> Á`¤§µª®×´N¬O border-image[1] + element()
>
> border-image Å¥¹Lªº¤H¤ñ¸û¦h¥ý¤£´£¡A¦Ó element() ¬O CSS3 ¹Ï¹³¼Ò²Õ¡]´N¬O©w
> ¸qº¥¼hªº¨º­Ó¼Ò²Õ¡^¤W­±¦³©w¸q[2]ªº¤@¶µµ²ªG¬O¹Ï¤ù¨ç¼Æ¡A¤j·N¬O¡u§â HTML ¸Ì
> ²{¦b¦³¬Y id ªº¤¸¯ÀªºÅã¥Üª¬ªp·í§@¬O¤@­Ó¹Ï¤ù¡v¡C³o¶µ¥\¯àªºÀ³¥Î¥]§t®³¤@­Ó
> canvas ·í¹Ï¤ù·í«D±`°ÊºAªº­I´ºµ¥µ¥[3]¡A°ò¥»¤W¥]§t¤F -webkit-box-reflect
> ©Ò¦³¥i¥H°µªº¨Æ±¡¦ý¬O±j¤j«Ü¦h¡I©Ò¥HÃä®Ø¤å¦rªº¹ê§@¤èªk¦p¤U¡A¥H¡uÊj¡vÃä®Ø¬°
> ¨Ò¤l¡G
>
> [1] https://developer.mozilla.org/zh_tw/CSS/-moz-border-image ¤¤¤å¸Õ½ :p
>     https://developer.mozilla.org/en/CSS/border-image ­^¤å­ì¤å
> [2] http://dev.w3.org/csswg/css3-images/#element-reference
> [3] http://hacks.mozilla.org/2010/08/mozelement/
>
> === ¹ê§@¶}©l ===
> »Ý­n¦³¥H¤Uªº HTML ¦bºô­¶ªº¬Y³B¡]§Úª¾¹D³o«Ü¤£¦ÛµM¡B¡B¡^¡G
>
> <div style="height: 0; overflow: hidden;">
> <table id="ÊjÃä®Ø¤E®c®æ">
> <tr><td>Êj</td><td>Êj</td><td> Êj</td></tr>
> <tr><td>Êj</td><td></td>   <td>Êj</td></tr>
> <tr><td>Êj</td><td>Êj</td><td> Êj</td></tr>
> </table>
> </div>
>
> ¤Î CSS¡G
>
> table { text-align: center; }
>
> /* »Ý­n¥ÎÊjÃä®Øªº¤¸¯À */
> p { border-image: element(#ÊjÃä®Ø¤E®c®æ) 33.3%; }
> === ¹ê§@µ²ªG ===
>
> ¡]¼á²M¤@¤U¡A¥H¤W¤£·|¦¨¥\¡A¦]¬°´Nºâ¤õª°¤ä´© -moz-element ¦ý¬OÁÙ¤£¯à¥Î¦b
> border-image ¤W :( ¤£¹L³o¬OÂsÄý¾¹¤£¤ä´©ªº°ÝÃD¡A³W½d¬O»¡©Ò¦³¹Ï¤ù¨ç¼Æ¡A¥]
> ¬Aº¥¼h¡A³£¥i¥H¥Î¦b border-image ªº¡^
>
> °²¦p»¡­n½Õ¾ã¤å¦r¥X²{¦b­þÃä¡A´N½Õ¾ã¸Ó¤E®c®æ´N¦n¤F¡C»Ý­n¨º­Ó¤E®c®æªº¥D­n­ì
> ¦]¦b©ó border-image *¥Ø«e¤£¤ä´©* §â¤@­Ó¹Ï¤ù·í§@©Ò¦³Ãä®Ø¹Ï¤ùªº³o­Ó«Ü°ò¥»
> ªº­n¨D¡C³o¨ä¹êÆZ©_©Çªº¡A¦Ó¥B CSS Reset µo©ú¤Hªº Eric Meyer ¤]¦³¦b
> www-style ¤W§Üij¹L[4]¡A¤£¹L CSS3 Ãä®Ø»P­I´º¼Ò²Õ¤w¸g­áµ²¤F¡A©Ò¥H®£©È­nµ¥
> CSS4 ¤F :p
>
> ¾ã²z¤@¤U¡A¥Ø«e border-image ¤£¯àÀ³¥Iªºª¬ªp¦³¡G
> 1. ¤£¯à¥Î¤@­Ó¹Ï¤ùªº­«½Æ¨Ï¥Î·í¦¨Ãä®Ø¹Ï¤ù¡A¦]¬°¨º­Ó¹Ï¤ù¤@©w·|³Q¤Á¦¨9¥÷¡C
> 2. ¤£¯à¤ñ¦p»¡¦b¥ªÃä¥kÃä¤S A ¹Ï¡A¤WÃä¤UÃä¥Î B ¹Ï³o¼Ë¡C¥u¯à¥Î¤@±i¹Ï¡C
>
> ¦³¨S¦³¤H·Q´£´£¬Ý border-image ªº»yªk­n«ç»òÂX®i¨ì³o¨Ç±¡ªp¡H
>
> [4] http://lists.w3.org/Archives/Public/www-style/2011Jan/0512
>
> ¤£¹L¤W­z¹ïÃä®Ø¤å¦rªº¸Ñªk¤Ó¤¾ªø¤F¡A¥[¤W¦b­ì¨Óªº HTML ¤å¥ó¸ÌÂ\©ÇªF¦è¯uªº«Ü
> ¤£¦n¡C©Ò¥H¦³¨â­Ó·sÂI¤l¡G
>
> 1. text-image()
>
> Á`¤§´N¬O§â¤@­Ó¤å¦rÂন¹Ï¤ùªº¨ç¼Æ¡A¤ñ¦p»¡ 'background: text-image("Åwªï¥ú
> Á{")' ¤§Ãþªº¡C¤£¹L³oÁٻݭn¨Ì¿à¤W­±ªº¨â­Ó°ÝÃDªº¸Ñ¨M¤~¯à¥Î¦bÃ䵨¤W¡C³o¦n¹³
> ·|Åܦ¨°£¤F canvas ¥H¥~¡AÅý¤H¤£¯à¿ï¨ú¤å¦rªº¥t¥~¤@­Ó¸Ñªk.... ¤£ª¾¹D·|¤£·|
> ¦]¬°³oÂI¨ü¨ì«Ü¤jªº¤Ï¹ï¡C
>
> 2. border-character
>
> Á`¤§´N¬O¬°¤F³o­Ó®×¨Òªº·sÄÝ©Ê¡Aborder-character-left¡Bborder-chracter-top
> µ¥µ¥¡C§Ú¬Oı±o¬°¤F¯U¹iªº®×¨Ò¦³¤@­Ó·sÄÝ©ÊÆZ©Çªº¡C
>
> ¤j®aı±o©O¡H
>
>
> ¦¹­P
> Kenny, ¤¤¤å¿³½ì¤p²ÕW3C³sµ¸¤H
> ±À¯S: http://twitter.com/kanghaolu
> ¼P®ö: http://www.plurk.com/kennyluck
> ·s®ö·L³Õ: http://t.sina.com.cn/1950042164 ¡]ÁÙ¤£¬O«Ü¦³ªF¦è¡^
>
>
>
>



-- 
Medical-Wei/ÃQÃÄ

----
Please avoid sending me Word or PowerPoint attachments.
See: http://www.gnu.org/philosophy/no-word-attachments.html
½Ð¾¨¥i¯à¤£­n±Hµ¹§Ú Microsoft Word ©Î¬O PowerPoint ªºªþ¥ó¡A§Ú·|¥´¤£¶}¡C
°Ñ·Ó¡Ghttp://blog.ofset.org/ckhung/index.php?post/081-nodocx

Received on Thursday, 7 April 2011 01:28:21 UTC