सीएसएस स्नातक सीमाएँ

शुभ दिन, प्रिय Khabrovites। मैं आपके लिए क्रिस कोहर के एक लेख का अनुवाद प्रस्तुत करता हूँ।

कहते हैं कि आपको एक विशिष्ट तत्व के चारों ओर एक ढाल सीमा की आवश्यकता है। और आप, ऐसा सोचते हैं:

• इसके लिए कोई सरल और स्पष्ट सीएसएस एपीआई नहीं है।
• मैं सिर्फ एक लीनियर ग्रेडिएंट बैकग्राउंड के साथ एक रैपर तत्व बनाऊंगा, और फिर आंतरिक तत्व इस पृष्ठभूमि के अधिकांश भाग को ब्लॉक कर देगा, सिवाय इसके चारों ओर एक पतली फिल लाइन को छोड़कर।

यह कुछ इस तरह दिखेगा:

एचटीएमएल

<div class="module-border-wrap"><div class="module"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias. </div></div> 

 body { height: 100vh; margin: 0; display: grid; place-items: center; background: #222; } .module-border-wrap { max-width: 250px; padding: 1rem; position: relative; background: linear-gradient(to right, red, purple); padding: 3px; } .module { background: #222; color: white; padding: 2rem; } 

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

यहाँ स्टीफन शॉ फिक्सिंग border-radius का एक उदाहरण है:

एचटीएमएल

 <div class="gradient-box"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. </p> </div> 

 .gradient-box { display: flex; align-items: center; //width: 50vw; width: 90%; margin: auto; max-width: 22em; position: relative; padding: 30% 2em; box-sizing: border-box; $border: 5px; color: #FFF; background: #000; background-clip: padding-box; /* !importanté */ border: solid $border transparent; /* !importanté */ border-radius: 1em; &:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; margin: -$border; /* !importanté */ border-radius: inherit; /* !importanté */ background: linear-gradient(to right, red, orange); } } html { height: 100%; background: #000; display: flex; } body { margin: auto; } 

लेकिन border-image बारे में पूरी तरह से मत भूलना, संभवतः सभी समय की बेवकूफ सीएसएस संपत्ति। आप इसे अलग-अलग तरफ ढाल ग्रेडिएंट प्राप्त करने के लिए उपयोग कर सकते हैं:

एचटीएमएल

 <div class="module"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias. </div> 

 body { height: 100vh; margin: 0; display: grid; place-items: center; background: #222; } .module { max-width: 250px; padding: 1rem; color: white; border-width: 3px; border-style: solid; border-image: linear-gradient( to bottom, red, rgba(0, 0, 0, 0) ) 1 100%; } 

border-image और border-image-slice दोनों का उपयोग करना एक ढाल बॉर्डर बनाने के लिए संभवतः सबसे सरल वाक्यविन्यास है, लेकिन दुर्भाग्य से यह border-radius के साथ संगत नहीं है।

एचटीएमएल

 <div> <div class="on-light"> <button class="border-gradient border-gradient-purple"> I have a gradient </button> </div> <div class="on-dark"> <button class="border-gradient border-gradient-purple"> I have a gradient </button> </div> <div class="on-light"> <button class="border-gradient border-gradient-green"> I have a gradient </button> </div> <div class="on-dark"> <button class="border-gradient border-gradient-green"> I have a gradient </button> </div> </div> 

 button { background: none; text-decoration: inherit; font-family: system-ui; font-size: 1rem; padding: 1rem 2rem; } .border-gradient { border-image-slice: 1; border-width: 2px; } .border-gradient-purple { border-image: linear-gradient(to left, #743ad5, #d53a9d); } .border-gradient-green { border-image: linear-gradient(to left, #00C853, #B2FF59); } body { height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; > div { width: 100%; text-align: center; } > div > div { width: 100%; padding: 1rem; } } .on-dark { background: #222; button { color: white; } }