एकाधिक सीमाएँ - सीएसएस-ट्रिक्स

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

आप एक छद्म तत्व को इस तरह से स्थिति दे सकते हैं कि वह तत्व के पीछे हो, और बड़ा हो, अपनी पृष्ठभूमि या छोटे और अंदर के साथ सीमा प्रभाव बनाता है (लेकिन सुनिश्चित करें कि सामग्री शीर्ष पर तैनात हो जाती है)।

कई सीमाओं की आवश्यकता वाले तत्व की अपनी सीमा और सापेक्ष स्थिति होनी चाहिए।

.borders ( position: relative; border: 5px solid #f00; )

द्वितीयक सीमा एक छद्म तत्व के साथ जोड़ी गई है। यह टॉप / लेफ्ट / बॉटम / राइट वैल्यू के साथ पूर्ण स्थिति और इनसेट के साथ सेट है। इसमें एक सीमा भी होगी और इसे नकारात्मक जेड-इंडेक्स मान देकर सामग्री के नीचे रखा जा सकता है (उदाहरण के लिए, पाठ की चयन क्षमता और लिंक की क्लिक करने की क्षमता)। नकारात्मक z- इंडेक्स के साथ सावधान, अगर यह अभी तक एक अन्य तत्व के साथ है, जिसका अपना पृष्ठभूमि रंग है, तो यह काम नहीं कर सकता है।

.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )

CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन gbgRqZ देखें।

आप :afterछद्म वर्ग का उपयोग करके एक तीसरी सीमा भी कर सकते हैं । विशेष ध्यान दें कि फ़ायरफ़ॉक्स 3 (पूर्व 3.6) शिकंजा का समर्थन करके इस ले लो :afterऔर :beforeहै, लेकिन अनुमति नहीं दे उन्हें बिल्कुल तैनात होना (इसलिए यह अजीब लग रहा है)।

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

जबकि यह सीमा की तुलना में थोड़ा अधिक सीमित है (पूरे तत्व के आसपास जाता है चाहे कोई भी हो) एक अतिरिक्त मुक्त सीमा है।

.borders ( border: 5px solid blue; outline: 5px solid red; )

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

बॉर्डर शेप को बनाने के लिए आप बॉक्स-शैडो का उपयोग कर सकते हैं, शैडो को ऑफ़सेट करके और 0 ब्लर है। साथ ही, कॉमा-से-वैल्यू को अलग करके, आप अपनी पसंद के अनुसार कई "बॉर्डर" रख सकते हैं:

.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )

CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन xbgreX देखें।

क्लिप्ड बैकग्राउंड का उपयोग करना

आप एक तत्व की पृष्ठभूमि को पैडिंग से पहले रोक सकते हैं। इस तरह एक तत्व सामान्य सीमा एक तरह से दोहरी सीमा की तरह दिख सकती है।

.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )

एक इनपुट पर:

CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन डबल बॉर्डर प्रभाव देखें।