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

border-boundaryकैसे तत्व की सीमाओं से व्यवहार प्रभावित करता है एक तत्व की सीमा को सीएसएस सेट की कमी में संपत्ति। यह सीएसएस राउंड डिस्प्ले लेवल 1 विनिर्देश में परिभाषित किया गया है, जो वर्तमान में वर्किंग ड्राफ्ट स्थिति में है। इसका मतलब है कि चीजें अब और औपचारिक उम्मीदवार सिफारिश के बीच बदल सकती हैं।

.element ( border-boundary: display; /* sets the boundary to the screen display */ )

तथ्य यह है कि यह संपत्ति CSS राउंड डिस्प्ले विनिर्देश में रहती है, पहले से ही आपको बताती है कि इसमें क्या अच्छा है: परिपत्र इंटरफेस बनाना। इससे भी अधिक विशेष रूप से, border-boundary"डिस्प्ले बॉर्डर के आसपास ड्राइंग बॉर्डर" खंड के अंतर्गत आता है , जो अभी तक एक और सुराग है जो यह अच्छी तरह से करता है: एक तत्व की सीमाओं को परिपत्र इंटरफेस की गोल सीमा का सम्मान करने की अनुमति देता है।

कल्पना कीजिए, अगर आप करेंगे, एक गोल स्क्रीन के साथ एक स्मार्ट घड़ी। मान लीजिए कि स्क्रीन 150px वर्ग है। और इसमें एक नारंगी बॉक्स है जो समान आयाम है।

कुछ नहीं, पागल, सही? नारंगी बॉक्स गोल प्रदर्शन के अनुरूप है क्योंकि यह किनारों से बह निकला है, जो छिपा हुआ है। लेकिन देखिए जब बॉर्डर को बॉक्स में जोड़ा जाता है तो क्या होता है ...

हम्म, इतना महान नहीं। फिर से, बॉक्स के किनारों को गोल डिस्प्ले ओवरफ्लो करता है, इसलिए हमारी सीमा प्रक्रिया में फंस जाती है।

यही कारण है कि जहां है border-boundaryचित्र में फिट बैठता है। displayबॉक्स के बॉर्डर को डिस्प्ले के गोल आकार का पालन करने की अनुमति देता है। चूंकि इस समय संपत्ति का ब्राउज़र समर्थन बिल्कुल ज़िल्च है, इसलिए मुझे इच्छित परिणाम के नकली दृश्य की पेशकश करने की अनुमति दें।

देखना है कि? बॉर्डर डिस्प्ले के राउंड शेप का सम्मान करता है, जिससे उसे क्लैप होने से बचाया जा सकता है।

आप कल्पना कर सकते हैं कि इंटरफेस के साथ घड़ियों के लिए डिजाइन करने के लिए यह कितना उपयोगी हो सकता है। CSS वर्किंग ग्रुप ने संभावित उपयोग के मामलों की एक सूची तैयार की है, जो border-boundaryवास्तव में काम आ सकते हैं।

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

border-boundary: none | parent | display;

प्रारंभिक मूल्य: none
पर लागू होता है: सभी तत्व
इन्हेरिटेड: हाँ
प्रतिशत: n / a
कंप्यूटेड वैल्यू: जैसा कि निर्दिष्ट है
एनिमेशन प्रकार: असतत

मूल्यों

none: सीमा पर कोई सीमा निर्धारित नहीं है।
parent: उस सीमा को निर्धारित करता है जहां तत्व का क्षेत्र और उसके मूल किनारों की सीमाएं मिलती हैं।
display: वह सीमा निर्धारित करता है जहां तत्व का क्षेत्र और व्यूपोर्ट का किनारा किनारा मिलते हैं।