CSS3 column-rule-width ÊôÐÔ

ʵÀý

ÉèÖÃÁÐÖ®¼äµÄÑÕÉ«¹æÔò£º

div
{
-moz-column-rule-width:1px; /* Firefox */
-webkit-column-rule-width:1px; /* Safari ºÍ Chrome */
column-rule-width:1px;
}

Ç××ÔÊÔÒ»ÊÔ

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

ä¯ÀÀÆ÷Ö§³Ö

IE Firefox Chrome Safari Opera

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

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

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

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

¶¨ÒåºÍÓ÷¨

column-rule-width ÊôÐԹ涨ÁÐÖ®¼äµÄ¿í¶È¹æÔò¡£

ĬÈÏÖµ£º medium
¼Ì³ÐÐÔ£º no
°æ±¾£º CSS3
JavaScript Óï·¨£º object.style.columnRuleWidth="thin"

Óï·¨

column-rule-width: thin|medium|thick|length;
Öµ ÃèÊö ²âÊÔ
thin ¶¨ÒåÏËϸ¹æÔò¡£ ²âÊÔ
medium ¶¨ÒåÖеȹæÔò¡£ ²âÊÔ
thick ¶¨Òå¿íºñ¹æÔò¡£ ²âÊÔ
length ¹æ¶¨¹æÔòµÄ¿í¶È¡£ ²âÊÔ

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

Column-count
°Ñ div ÔªËØÖеÄÎı¾»®·ÖΪÈýÁС£
Column-gap
½« div ÔªËØÖеÄÎı¾·ÖΪÈýÁУ¬²¢Áмä 30 ÏñËØµÄ¼ä¸ô¡£
Column-rule
¹æ¶¨ÁÐÖ®¼äµÄ¿í¶È¡¢ÑùʽºÍÑÕÉ«¡£

Ïà¹ØÒ³Ãæ

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

VUE