कॉलम-नियम-शैली - सीएसएस-ट्रिक्स

विषय - सूची:

Anonim

column-rule-styleसीएसएस संपत्ति निर्दिष्ट लाइन है कि एक सीएसएस बहु कॉलम लेआउट में स्तंभों के बीच तैयार की गई है के टाइप करें।

संपत्ति अपने आप में सीमित है। जब हम इसे घोषित करते हैं, तो यह CSS कॉलम के बीच एक रेखा खींच देगा जो एक पिक्सेल चौड़ा और काला है।

.columns ( columns: 2 600px; column-rule-style: solid; )

चीजें तब और दिलचस्प हो जाती हैं जब हम column-rule-styleअन्य column-rule-गुणों के साथ संयोजन करना शुरू करते हैं, जिसमें column-rule-width(एक मोटी रेखा निर्धारित करना) और column-rule-color(रंग बदलना) शामिल है।

.columns ( columns: 2 600px; column-rule-style: solid; column-rule-width: 3px; column-rule-color: #f8a100; )

या, हे, हम केवल column-ruleशॉर्टहैंड संपत्ति का उपयोग कर सकते हैं जो एक ही घोषणा में तीनों को जोड़ती है:

.columns ( columns: 2 600px; column-rule: solid 3px #f8a100; )

वाक्य - विन्यास

column-rule-style: ;
  • प्रारंभिक मूल्य: none
  • इस पर लागू होता है: मल्टी-कॉलम कंटेनर
  • इन्हेरिट किया: नहीं
  • कंप्यूटेड वैल्यू: निर्दिष्ट कीवर्ड
  • एनिमेशन प्रकार: असतत

मूल्यों

column-rule-style निम्नलिखित मूल्यों को स्वीकार करता है:

/* Keyword values */ column-rule-style: none; column-rule-style: hidden; column-rule-style: dotted; column-rule-style: dashed; column-rule-style: solid; column-rule-style: double; column-rule-style: groove; column-rule-style: ridge; column-rule-style: inset; column-rule-style: outset; /* Global values */ column-rule-style: inherit; column-rule-style: initial; column-rule-style: unset;

डेमो

ब्राउज़र का समर्थन

अर्थात एज फ़ायर्फ़ॉक्स क्रोम सफारी ओपेरा
10+ 12+ 3.5+ है 4+ ३.२+ 11.5+
Android क्रोम Android फ़ायरफ़ॉक्स Android ब्राउज़र iOS सफारी ऑपेरा मिनी
85+ 79+ नहीं न ३.२+ सब
स्रोत: कैनुएज़

विनिर्देश

सीएसएस मल्टी-कॉलम लेआउट मॉड्यूल स्तर 1 (संपादक का ड्राफ्ट)