W3.CSS बॉर्डर्स
मेरी सीमाएँ हैं।
मेरे पास केवल बाईं सीमा है।
मेरे पास एक हरे रंग की शीर्ष और निचली सीमा है।
मेरे पास नीली सीमाएँ हैं।
लाल बॉर्डर जो होवर पर हरा हो जाता है।
W3.CSS बॉर्डर क्लासेस
W3.CSS निम्नलिखित सीमा वर्ग प्रदान करता है:
| कक्षा | को परिभाषित करता है |
|---|---|
| w3-बॉर्डर | किसी तत्व में बॉर्डर (ऊपर, दाएं, नीचे, बाएं) जोड़ता है |
| w3-सीमा-शीर्ष | एक तत्व के लिए एक शीर्ष सीमा जोड़ता है |
| w3-सीमा-दाएं | किसी तत्व में दायां बॉर्डर जोड़ता है |
| w3-सीमा-नीचे | किसी तत्व में निचला बॉर्डर जोड़ता है |
| w3-सीमा-बाएं | तत्व में बायां बॉर्डर जोड़ता है |
| w3-सीमा-0 | सभी सीमाओं को हटा देता है |
| w3-सीमा- रंग | सीमा को एक निर्दिष्ट रंग में प्रदर्शित करता है (जैसे लाल, नीला, आदि) |
| w3-होवर-बॉर्डर- रंग | एक होवर करने योग्य सीमा रंग जोड़ता है |
| w3-बॉटमबार | एक तत्व के लिए एक मोटी निचली सीमा जोड़ता है |
| w3-बाएंबार | एक तत्व के लिए एक मोटी बाईं सीमा जोड़ता है |
| w3-दायाँबार | एक तत्व के लिए एक मोटी दाहिनी सीमा जोड़ता है |
| w3-टॉपबार | एक तत्व के लिए एक मोटी शीर्ष सीमा जोड़ता है |
सीमाओं को जोड़ना
किसी भी HTML तत्व में बॉर्डर जोड़ने के लिए w3-सीमा वर्ग का उपयोग किया जाता है :
मेरी सीमाएँ हैं।
मेरे पास केवल बाईं सीमा है।
मेरे ऊपर और नीचे की सीमाएँ हैं।
उदाहरण
<div class="w3-panel w3-border">
<p>I have borders.</p>
</div>
<div class="w3-panel w3-border-left">
<p>I have only a left border.</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom">
<p>I have top and bottom borders.</p>
</div>
सीमा रंग
सीमाओं में रंग जोड़ने के लिए w3-border -color वर्गों का उपयोग किया जाता है :
मेरे पास लाल सीमाएँ हैं।
मेरे पास नीली बाईं सीमा है।
मेरे पास एक हरे रंग की शीर्ष और निचली सीमा है।
मेरे पास एक लाल बाईं सीमा और एक पीला-लाल पृष्ठभूमि रंग है।
उदाहरण
<div class="w3-panel w3-border w3-border-red">
<p>I have red borders.</p>
</div>
<div class="w3-panel w3-border-left w3-border-blue">
<p>I have a blue left border.</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom w3-border-green">
<p>I have a green top and bottom border.</p>
</div>
गोल सीमाएं
गोलाकार बॉर्डर जोड़ने के लिए, w3-राउंड -साइज़ क्लास में से कोई एक जोड़ें:
मेरी सामान्य सीमाएँ हैं।
मेरी छोटी गोल सीमाएँ हैं।
मेरे पास गोल सीमाएँ हैं।
मेरे पास बड़ी गोल सीमाएँ हैं।
मेरे पास xlarge गोलाकार सीमाएं हैं।
मेरे पास xxlarge गोलाकार सीमाएं हैं।
उदाहरण
<div class="w3-panel w3-border">
<p>My borders are normal.</p>
</div>
<div class="w3-panel w3-border w3-round-small">
<p>My borders are rounded (small).</p>
</div>
<div class="w3-panel
w3-border w3-round">
<p>My borders are rounded.</p>
</div>
<div class="w3-panel w3-border w3-round-large">
<p>I have
large rounded borders.</p>
</div>
<div class="w3-panel w3-border
w3-round-xlarge">
<p>I have xlarge rounded borders.</p>
</div>
<div class="w3-panel w3-border w3-round-xxlarge">
<p>I have
xxlarge rounded borders.</p>
</div>
मोटी सीमाएं
किसी तत्व में मोटी बॉर्डर जोड़ने के लिए w3 -topbar , w3-bottombar , w3-leftbar , और w3-rightbar वर्गों का उपयोग किया जाता है:
उदाहरण
<div class="w3-panel w3-leftbar">
<p>I have a thick left border.</p>
</div>
<div class="w3-panel w3-leftbar w3-border-blue">
<p>I have a thick blue left border.</p>
</div>
<div class="w3-panel w3-leftbar w3-border-blue w3-pale-blue">
<p>I have a thick blue left border and a pale-blue background color.</p>
</div>
<div class="w3-panel w3-topbar w3-bottombar w3-border-red w3-pale-red">
<p>I have a thick red top and bottom border and a pale-red background color.</p>
</div>
मंडराने योग्य सीमाएं
w3-hover-border- रंग वर्ग माउस-ओवर पर बॉर्डर का रंग बदलते हैं :
सीमा जो होवर पर लाल हो जाती है।
लाल बॉर्डर जो होवर पर हरा हो जाता है।
उदाहरण
<div class="w3-panel w3-border w3-hover-border-red">
<p>Border that turns red on hover</p>
</div>
<div class="w3-panel w3-border w3-border-red w3-hover-border-green">
<p>Red border that turns green on hover</p>
</div>
उदाहरण
<div class="w3-panel w3-leftbar w3-border-white w3-hover-border-green">
<p>Thick (invisible) left border that turns green on hover.</p>
</div>
<div class="w3-panel w3-bottombar w3-border-white w3-hover-border-green">
<p>Thick (invisible) bottom border that turns green on hover.</p>
</div>
मोटा सफेद (अदृश्य) बॉर्डर जो होवर पर हरा हो जाता है।
मोटी सफेद (अदृश्य) सीमा जो होवर पर काली हो जाती है।
उदाहरण
<div style="border:16px solid white" class="w3-panel w3-hover-border-green">
<p>Thick (invisible) border that turns green on hover.</p>
</div>
<div style="border:16px solid white" class="w3-panel w3-hover-border-black">
<p>Thick (invisible) border that turns black on hover.</p>
</div>