CSS
सीमा

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

• सीमा

• बॉर्डर: बॉर्डर-चौड़ाई बॉर्डर-शैली बॉर्डर-रंग | प्रारंभिक | वारिस;

• बॉर्डर-टॉप: बॉर्डर-चौड़ाई बॉर्डर-स्टाइल बॉर्डर-कलर | प्रारंभिक | वारिस;

• बॉर्डर-बॉटम: बॉर्डर-चौड़ाई बॉर्डर-स्टाइल बॉर्डर-कलर | प्रारंभिक | वारिस;

• बॉर्डर-लेफ्ट: बॉर्डर-चौड़ाई बॉर्डर-स्टाइल बॉर्डर-कलर | प्रारंभिक | वारिस;

• बॉर्डर-राइट: बॉर्डर-चौड़ाई बॉर्डर-स्टाइल बॉर्डर-कलर | प्रारंभिक | वारिस;

• झालर की शैली

• सीमा-शैली: 1-4 कोई नहीं | छिपा हुआ | बिंदीदार | धराशायी | ठोस | डबल | नाली | रिज | इनसेट | शुरुआत | प्रारंभिक | वारिस;

• बॉर्डर-त्रिज्या

• सीमा-त्रिज्या: 1-4 लंबाई | % / 1-4 लंबाई | % | प्रारंभिक | वारिस;

• सीमा-शीर्ष-बाएँ-त्रिज्या: लंबाई | % [लंबाई | %] | प्रारंभिक | वारिस;

• बॉर्डर-टॉप-राइट-रेडियस: लंबाई | % [लंबाई | %] | प्रारंभिक | वारिस;

• सीमा-तल-बायीं-त्रिज्या: लंबाई | % [लंबाई | %] | प्रारंभिक | वारिस;

• बॉर्डर-बॉटम-राइट-रेडियस: लंबाई | % [लंबाई | %] | प्रारंभिक | वारिस;

• सीमा की छवि

• बॉर्डर-इमेज: बॉर्डर-इमेज-सोर्स बॉर्डर-इमेज-स्लाइस [बॉर्डर-इमेज-चौड़ाई [बॉर्डर-इमेज-आउटसेट]] बॉर्डर-इमेज-रिपीट

• सीमा-छवि-स्रोत: कोई नहीं | छवि;

• बॉर्डर-इमेज-स्लाइस: 1-4 नंबर | प्रतिशत [भरें]

• बॉर्डर-इमेज-रिपीट: 1-2 स्ट्रेच | दोहराना | गोल | अंतरिक्ष

• सीमा-पतन

• सीमा-पतन: अलग | पतन | प्रारंभिक | इनहेरिट

टिप्पणियों

बॉर्डर-त्रिज्या

सीमा-त्रिज्या संपत्ति आपको मूल बॉक्स मॉडल के आकार को बदलने की अनुमति देती है।

किसी तत्व के प्रत्येक कोने में दो मान हो सकते हैं, उस कोने के ऊर्ध्वाधर और क्षैतिज त्रिज्या के लिए (अधिकतम 8 मान के लिए)।

मूल्यों का पहला सेट क्षैतिज त्रिज्या को परिभाषित करता है। मानों का वैकल्पिक दूसरा सेट, '/' से पहले, ऊर्ध्वाधर त्रिज्या को परिभाषित करता है। यदि केवल एक सेट मान की आपूर्ति की जाती है, तो इसका उपयोग ऊर्ध्वाधर और क्षैतिज त्रिज्या दोनों के लिए किया जाता है।

border-radius: 10px 5% / 20px 25em 30px 35em;

10px शीर्ष-बाएँ-और-दाएँ के क्षैतिज त्रिज्या है। और 5% शीर्ष-दाएं-और-नीचे-बाएँ के क्षैतिज त्रिज्या है। '/' के बाद के अन्य चार मान शीर्ष-बाएँ, शीर्ष-दाएँ, नीचे-दाएँ और नीचे-बाएँ के लिए लंबवत त्रिज्या हैं।

कई सीएसएस गुणों के साथ, शॉर्टहैंड का उपयोग किसी भी या सभी संभावित मूल्यों के लिए किया जा सकता है। इसलिए आप एक से आठ मान तक कुछ भी निर्दिष्ट कर सकते हैं। निम्नलिखित आशुलिपि आपको प्रत्येक कोने के क्षैतिज और ऊर्ध्वाधर त्रिज्या को एक ही मान पर सेट करने की अनुमति देती है:

HTML:

<div class='box'></div>

सीएसएस:

.box {
    width: 250px;
    height: 250px;
    background-color: black;
    border-radius: 10px;
}

बॉर्डर-त्रिज्या का उपयोग आमतौर पर बॉक्स तत्वों को मंडलियों में बदलने के लिए किया जाता है। सीमा-त्रिज्या को वर्ग तत्व की लंबाई के आधे भाग तक सेट करके, एक गोलाकार तत्व बनाया जाता है:

.circle {
    width: 200px;
    height: 200px;
    border-radius: 100px;
}

क्योंकि सीमा-त्रिज्या प्रतिशत स्वीकार करता है, सीमा-त्रिज्या मान की मैन्युअल रूप से गणना करने से बचने के लिए 50% का उपयोग करना आम है:

.circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

यदि चौड़ाई और ऊंचाई के गुण समान नहीं हैं, तो परिणामस्वरूप आकार एक चक्र के बजाय एक अंडाकार होगा।

ब्राउज़र विशिष्ट सीमा-त्रिज्या उदाहरण:

  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;

झालर की शैली

border-style संपत्ति एक तत्व की सीमा की शैली निर्धारित करती है। यह गुण एक से चार मानों तक हो सकता है (तत्व के प्रत्येक पक्ष के लिए एक मूल्य।)

उदाहरण:

border-style: dotted;

border-style: dotted solid double dashed;

border-style भी मान हो सकते हैं none और hidden । <table> तत्वों के लिए सीमा संघर्ष समाधान के लिए hidden कार्यों को छोड़कर, उनका एक ही प्रभाव है। एक <table> कई सीमाओं के साथ, none की भी सबसे कम प्राथमिकता नहीं है (एक संघर्ष में अर्थ, सीमा दिखाएगा), और hidden सर्वोच्च प्राथमिकता है (एक संघर्ष में अर्थ, सीमा नहीं दिखाएगी)।

सीमा (आशुलिपि)

ज्यादातर मामलों में आप एक तत्व के सभी पक्षों के लिए कई सीमा गुण ( border-width , border-style और border-color ) को परिभाषित करना चाहते हैं।

लिखने के बजाय:

border-width: 1px;
border-style: solid;
border-color: #000;

आप बस लिख सकते हैं:

border: 1px solid #000;

ये आशुलिपि हर तत्व के लिए उपलब्ध हैं: border-top , border-left , border-right और border-bottom । तो आप कर सकते हैं:

border-top: 2px double #aaaaaa;

सीमा की छवि

border-image प्रॉपर्टी के साथ आपको सामान्य बॉर्डर स्टाइल के बजाय एक इमेज सेट करने की संभावना है।

एक border-image अनिवार्य रूप से एक से मिलकर बनती है

• border-image-source : इमेज का उपयोग करने का मार्ग
• border-image-slice : उस ऑफसेट को निर्दिष्ट करता है जिसका उपयोग इमेज को नौ क्षेत्रों (चार कोनों , चार किनारों और एक मध्य ) में विभाजित करने के लिए किया जाता है
• border-image-repeat : यह निर्दिष्ट करता है कि पक्षों और बॉर्डर इमेज के बीच की छवियों को कैसे बढ़ाया जाए

निम्नलिखित उदाहरण पर गौर करें, सीमा सीमा। Png 90x90 पिक्सेल की एक छवि है:

border-image: url("border.png") 30 stretch;

छवि को 30x30 पिक्सेल के साथ नौ क्षेत्रों में विभाजित किया जाएगा। किनारों का उपयोग सीमा के कोनों के रूप में किया जाएगा जबकि बीच में साइड का उपयोग किया जाएगा। यदि तत्व 30px से अधिक / चौड़ा है, तो छवि का यह हिस्सा खिंच जाएगा। छवि का मध्य भाग पारदर्शी होने के लिए डिफॉल्ट करता है।

border- [छोड़ दिया | सही | शीर्ष | तल]

border-[left|right|top|bottom] प्रॉपर्टी का इस्तेमाल किसी एलिमेंट के एक साइड में बॉर्डर जोड़ने के लिए किया जाता है।

उदाहरण के लिए यदि आप किसी तत्व के बाईं ओर एक सीमा जोड़ना चाहते हैं, तो आप ऐसा कर सकते हैं:

#element {
    border-left: 1px solid black;
}

सीमा-पतन

border-collapse संपत्ति केवल table एस (और display: table रूप में display: table तत्व display: table या inline-table ) पर लागू होती है और सेट करती है कि क्या टेबल बॉर्डर को एक सीमा में ढहा दिया गया है या मानक एचटीएमएल के रूप में अलग किया गया है।

table {
  border-collapse: separate; /* default */
  border-spacing: 2px; /* Only works if border-collapse is separate */
}

टेबल्स - बॉर्डर-पतन प्रलेखन प्रविष्टि भी देखें

एकाधिक सीमाएँ

रूपरेखा का उपयोग करना:

.div1{
  border: 3px solid black; 
  outline: 6px solid blue;
  width: 100px;
  height: 100px;
  margin: 20px;
}

बॉक्स-छाया का उपयोग करना:

.div2{
  border: 5px solid green; 
  box-shadow: 0px 0px 0px 4px #000;
  width: 100px;
  height: 100px;
  margin: 20px;
}

एक छद्म तत्व का उपयोग करना:

.div3 {
  position: relative;
  border: 5px solid #000;
  width: 100px;
  height: 100px;
  margin: 20px;
}
.div3:before {
  content: " ";
  position: absolute;
  border: 5px solid blue;
  z-index: -1;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
}

http://jsfiddle.net/MadalinaTn/bvqpcohm/2/

सीमा-छवि का उपयोग करके एक बहुरंगी बॉर्डर बनाना

सीएसएस

.bordered {
  border-image: linear-gradient(to right, red 20%, green 20%, green 40%, blue 40%, blue 60%, maroon 60%, maroon 80%, chocolate 80%); /* gradient with required colors */
  border-image-slice: 1;
}

एचटीएमएल

<div class='bordered'>Border on all sides</div>

उपरोक्त उदाहरण में एक सीमा का उत्पादन होगा जिसमें 5 अलग-अलग रंग शामिल हैं। रंगों को linear-gradient माध्यम से परिभाषित किया जाता है (आप डॉक्स में ग्रेडिएंट के बारे में अधिक जानकारी पा सकते हैं)। आप border-image-slice संपत्ति के बारे में अधिक जानकारी एक ही पृष्ठ में border-image उदाहरण में पा सकते हैं।

( नोट: प्रस्तुतिकरण के उद्देश्य से तत्व में अतिरिक्त गुण जोड़े गए। )

आपने देखा होगा कि बाईं सीमा का केवल एक रंग (ग्रेडिएंट का प्रारंभ रंग) है, जबकि दाईं सीमा में भी केवल एक रंग (ग्रेडिएंट का अंतिम रंग) है। इसका कारण यह है कि सीमा छवि संपत्ति काम करती है। यह ऐसा है जैसे कि ढाल को पूरे बॉक्स पर लागू किया जाता है और फिर रंगों को पैडिंग और सामग्री क्षेत्रों से मुखौटा किया जाता है, इस प्रकार यह दिखता है कि केवल सीमा में ढाल है।

किस बॉर्डर (एस) में एक एकल रंग है जो कि ढाल की परिभाषा पर निर्भर है। अगर ग्रेडिएंट ए to right ग्रेडिएंट है, तो लेफ्ट बॉर्डर ग्रेडिएंट का स्टार्ट कलर होगा और राइट बॉर्डर एंड कलर होगा। यदि यह to bottom ढाल है तो शीर्ष सीमा ढाल का प्रारंभ रंग होगा और नीचे की सीमा अंत रंग होगी। नीचे एक to bottom 5 रंगीन ढाल का उत्पादन होता है।

यदि सीमा केवल तत्व के विशिष्ट पक्षों पर आवश्यक है, तो border-width संपत्ति का उपयोग किसी अन्य सामान्य सीमा के समान किया जा सकता है। उदाहरण के लिए, नीचे दिए गए कोड को जोड़ने से तत्व के शीर्ष पर एक सीमा का उत्पादन होगा।

border-width: 5px 0px 0px 0px;

ध्यान दें, किसी भी तत्व जिसमें border-image प्रॉपर्टी है , border-radius सम्मान नहीं करेगा (यानी बॉर्डर वक्र नहीं होगा)। यह कल्पना में नीचे दिए गए कथन पर आधारित है:

एक बॉक्स की पृष्ठभूमि, लेकिन इसकी सीमा-छवि नहीं, उपयुक्त वक्र से चिपकी हुई है (जैसा कि 'पृष्ठभूमि-क्लिप' द्वारा निर्धारित किया गया है)।