CSS3 column-rule ÊôÐÔ

ʵÀý

¹æ¶¨ÁÐÖ®¼äµÄ¿í¶È¡¢ÑùʽºÍÑÕÉ«¹æÔò£º

div
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari ºÍ Chrome */
column-rule:3px outset #ff00ff;
}

Ç××ÔÊÔÒ»ÊÔ

Ò³Ãæµ×²¿Óиü¶àʵÀý¡£

ä¯ÀÀÆ÷Ö§³Ö

IE Firefox Chrome Safari Opera

Internet Explorer 10 ºÍ Opera Ö§³Ö column-rule ÊôÐÔ¡£

Firefox Ö§³ÖÌæ´úµÄ -moz-column-rule ÊôÐÔ¡£

Safari ºÍ Chrome Ö§³ÖÌæ´úµÄ -webkit-column-rule ÊôÐÔ¡£

×¢ÊÍ£ºInternet Explorer 9 ÒÔ¼°¸üÔç°æ±¾µÄä¯ÀÀÆ÷²»Ö§³Ö column-rule ÊôÐÔ¡£

¶¨ÒåºÍÓ÷¨

column-rule ÊôÐÔÊÇÒ»¸ö¼òдÊôÐÔ£¬ÓÃÓÚÉèÖÃËùÓÐ column-rule-* ÊôÐÔ¡£

column-rule ÊôÐÔÉèÖÃÁÐÖ»¾õµÃ¿í¶È¡¢ÑùʽºÍÑÕÉ«¹æÔò¡£

ĬÈÏÖµ£º medium none black
¼Ì³ÐÐÔ£º no
°æ±¾£º CSS3
JavaScript Óï·¨£º object.columnRule="3px outset #ff00ff"

Óï·¨

column-rule: column-rule-width column-rule-style column-rule-color;
Öµ ÃèÊö
column-rule-width ÉèÖÃÁÐÖ®¼äµÄ¿í¶È¹æÔò¡£
column-rule-style ÉèÖÃÁÐÖ®¼äµÄÑùʽ¹æÔò¡£
column-rule-color ÉèÖÃÁÐÖ®¼äµÄÑÕÉ«¹æÔò¡£

Ç××ÔÊÔÒ»ÊÔ - ʵÀý

Column-count
°Ñ div ÔªËØÖеÄÎı¾»®·ÖΪÈýÁС£
Column-gap
½« div ÔªËØÖеÄÎı¾·ÖΪÈýÁУ¬²¢Áмä 30 ÏñËØµÄ¼ä¸ô¡£

Ïà¹ØÒ³Ãæ

CSS3 ½Ì³Ì£ºCSS3 ¶àÁÐ

VUE