बॉक्स-सजावट-ब्रेक - सीएसएस-ट्रिक्स

box-decoration-breakसंपत्ति आपको यह नियंत्रित करने बॉक्स सजावट एक तत्व "टूट" के टुकड़े भर में तैयार कर रहे हैं देता है। कोई तत्व किसी पंक्ति के अंत में, स्तंभों पर, या पृष्ठ विराम पर विखंडित हो सकता है।

.module ( box-decoration-break: clone; )

बॉक्स सजावट द्वारा नियंत्रित गुण box-decoration-breakइस प्रकार हैं: background(और इसके उप-गुण), border, border-radius, border-image, box-shadow, margin, और padding।

मूल्यों

slice: प्रारंभिक मूल्य। बॉक्स सजावट तत्व के रूप में एक पूरे पर लागू होती है और तत्व के टुकड़ों के किनारों पर टूट जाती है।
clone: सजावट तत्व के प्रत्येक टुकड़े पर लागू होती है जैसे कि टुकड़े अखंड, व्यक्तिगत तत्व थे। सीमाएं तत्व के प्रत्येक टुकड़े के चार किनारों को लपेटती हैं, और प्रत्येक टुकड़े के लिए पृष्ठभूमि को पूर्ण रूप से फिर से तैयार किया जाता है।

प्रयोग

box-decoration-break टूटे हुए तत्व के टुकड़ों के बीच एक सुसंगत डिजाइन बनाए रखने में मदद कर सकता है।

इस उदाहरण की छवि में, एक नारंगी सीमा और एक 1em शीर्ष मार्जिन वाला एक पैराग्राफ दो स्तंभों में तोड़ा गया है। शीर्ष पैराग्राफ का प्रारंभिक box-decoration-breakमूल्य है slice। नीचे पैराग्राफ का cloneमूल्य है।

उस का लेख और डेमो।

डेमो

box-decoration-breakसंपत्ति सीमित ब्राउज़र समर्थन हासिल है। यह डेमो फ़ायरफ़ॉक्स 37+ में सबसे अच्छा काम करता है, जहां box-decoration-breakपूरी तरह से समर्थित है।

कोड 10 पर पेन 1074b03653ffb32b88a6f88823c3de34 सीएसएस-ट्रिक्स (@ सीएसएस-ट्रिक्स) देखें।

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

इस लेखन के समय केवल फ़ायरफ़ॉक्स पूरी तरह से समर्थन करता है box-decoration-break। वेबकिट ब्राउज़र और ओपेरा आंशिक रूप से box-decoration-breakलाइन विराम पर इनलाइन तत्वों पर समर्थन करते हैं , लेकिन कॉलम या पृष्ठ विराम पर नहीं।