मैं केवल CSS3 का उपयोग करके इनसेट बॉर्डर-त्रिज्या कैसे बना सकता हूँ?
ब्राउज़ करें:546
CSS3 के साथ इनसेट बॉर्डर-त्रिज्या
CSS3 में, इनसेट बॉर्डर-त्रिज्या प्राप्त करना, जहां कोने बाहर की बजाय अंदर की ओर घुमावदार होते हैं, कर सकते हैं छवियों का उपयोग किए बिना चुनौतीपूर्ण बनें। हालाँकि, एक चतुर समाधान है जो CSS3 ग्रेडिएंट्स का उपयोग करता है।
ली वेरौ के सरल दृष्टिकोण में कर्व्स के साथ पारदर्शी ग्रेडिएंट्स की एक श्रृंखला बनाना, इनसेट बॉर्डर-त्रिज्या का भ्रम पैदा करना शामिल है। इन ग्रेडिएंट्स को सटीक रूप से स्थित करके, आप वांछित गोल कोनों वाले प्रभाव को प्राप्त कर सकते हैं। div.राउंड { पृष्ठभूमि: -मोज़-रेडियल-ग्रेडिएंट(0 100%, सर्कल, आरजीबीए(204,0,0,0) 14पीएक्स, #सी00 15पीएक्स), -मोज़-रेडियल-ग्रेडिएंट(100% 100%, सर्कल, आरजीबीए(204,0,0,0) 14पीएक्स, #सी00 15पीएक्स), -मोज़-रेडियल-ग्रेडिएंट(100% 0, सर्कल, आरजीबीए(204,0,0,0) 14पीएक्स, #सी00 15पीएक्स), -मोज़-रेडियल-ग्रेडिएंट(0 0, सर्कल, आरजीबीए(204,0,0,0) 14px, #c00 15px); पृष्ठभूमि: -ओ-रेडियल-ग्रेडिएंट(0 100%, सर्कल, आरजीबीए(204,0,0,0) 14पीएक्स, #सी00 15पीएक्स), -ओ-रेडियल-ग्रेडिएंट(100% 100%, सर्कल, आरजीबीए(204,0,0,0) 14पीएक्स, #सी00 15पीएक्स), -ओ-रेडियल-ग्रेडिएंट(100% 0, सर्कल, आरजीबीए(204,0,0,0) 14पीएक्स, #सी00 15पीएक्स), -ओ-रेडियल-ग्रेडिएंट(0 0, सर्कल, आरजीबीए(204,0,0,0) 14px, #c00 15px); पृष्ठभूमि: -वेबकिट-रेडियल-ग्रेडिएंट(0 100%, सर्कल, आरजीबीए(204,0,0,0) 14पीएक्स, #सी00 15पीएक्स), -वेबकिट-रेडियल-ग्रेडिएंट(100% 100%, सर्कल, आरजीबीए(204,0,0,0) 14पीएक्स, #सी00 15पीएक्स), -वेबकिट-रेडियल-ग्रेडिएंट(100% 0, सर्कल, आरजीबीए(204,0,0,0) 14पीएक्स, #सी00 15पीएक्स), -वेबकिट-रेडियल-ग्रेडिएंट(0 0, सर्कल, आरजीबीए(204,0,0,0) 14px, #c00 15px); पृष्ठभूमि-स्थिति: नीचे बाएँ, नीचे दाएँ, ऊपर दाएँ, ऊपर बाएँ; -मोज़-पृष्ठभूमि-आकार: 50% 50%; -वेबकिट-पृष्ठभूमि-आकार: 50% 50%; पृष्ठभूमि-आकार: 50% 50%; बैकग्राउंड-रिपीट: नो-रिपीट; }
इस वर्ग को किसी तत्व पर लागू करने से इनसेट बॉर्डर-त्रिज्या वाला एक तत्व प्राप्त होगा। यह ध्यान रखना महत्वपूर्ण है कि यह तकनीक आरजीबीए और ग्रेडिएंट्स के समर्थन पर निर्भर करती है, जो इसे एक प्रगतिशील वृद्धि रणनीति बनाती है। पुराने ब्राउज़रों या ब्राउज़रों के लिए जो ग्रेडिएंट का समर्थन नहीं करते हैं, समर्थन प्रदान करने के लिए एक छवि-आधारित फ़ॉलबैक की अनुशंसा की जाती है।
-
कैसे एक जावास्क्रिप्ट ऑब्जेक्ट की कुंजी को वर्णानुक्रम में सॉर्ट करने के लिए?] यह निम्नलिखित चरणों का उपयोग करके प्राप्त किया जा सकता है: object की कुंजियों को एक सरणी में const unordered = { 'b': 'foo', 'c': 'bar', ...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया -
मुझे अपनी सिल्वरलाइट LINQ क्वेरी में "क्वेरी पैटर्न का कार्यान्वयन" त्रुटि क्यों नहीं मिल रही है?] यह त्रुटि आम तौर पर तब होती है जब या तो Linq नामस्थान को छोड़ दिया जाता है या queried प्रकार में ienumerable कार्यान्वयन का अभाव होता है। इस विशिष्...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
`JSON` पैकेज का उपयोग करके जाने में JSON सरणियों को कैसे पार्स करें?उदाहरण: निम्नलिखित गो कोड पर विचार करें: प्रकार jsontype संरचना { सरणी [] स्ट्रिंग } func मुख्य () { datajson: = `[" 1 ","...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
अनियंत्रित संग्रह में ट्यूपल्स के लिए एक जेनेरिक हैश फ़ंक्शन को कैसे लागू करें?] हालांकि, कस्टम हैश फ़ंक्शन को परिभाषित किए बिना इन संग्रहों में कुंजी के रूप में टुपल्स का उपयोग करने से अप्रत्याशित व्यवहार हो सकता है। इसे ठीक क...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
MySQL में दो स्थितियों के आधार पर पंक्तियों को कुशलता से कैसे डालें या अपडेट करें?] मौजूदा पंक्ति यदि कोई मैच पाया जाता है। यह शक्तिशाली सुविधा एक नई पंक्ति सम्मिलित करके कुशल डेटा हेरफेर के लिए अनुमति देती है यदि कोई मिलान पंक्ति म...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
JQuery का उपयोग करते हुए "छद्म-तत्व" के बाद ": के बाद" के CSS विशेषता को प्रभावी ढंग से कैसे संशोधित करें?] हालाँकि, JQuery का उपयोग करके इन तत्वों तक पहुंचना और हेरफेर करना चुनौतियां पेश कर सकता है। ऐसा इसलिए है क्योंकि छद्म-तत्व DOM (दस्तावेज़ ऑब्जेक्ट म...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
`कंसोल.लॉग` संशोधित ऑब्जेक्ट मान अपवाद का कारण दिखाता हैइस कोड स्निपेट का विश्लेषण करके इस रहस्य को उजागर करें: foo = [{id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5},]; कंसोल.लॉग ('foo1', foo, ...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
PHP में खाली सरणियों का कुशलता से कैसे पता लगाएं?] यदि आवश्यकता किसी भी सरणी तत्व की उपस्थिति को सत्यापित करने की है, तो PHP की ढीली टाइपिंग सरणी के प्रत्यक्ष मूल्यांकन के लिए ही अनुमति देती है: अग...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
मैं PHP में दो समान-आकार के सरणियों से पुनरावृति और प्रिंट मान कैसे कर सकता हूं?] arrays: foreach ($ कोड के रूप में $ कोड और $ नाम के रूप में $ नाम) { ... } यह दृष्टिकोण अमान्य है। इसके बजाय, = का उपयोग पुनरावृत्ति को सिंक...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
ASP.NET में Async void बनाम Async कार्य: Async void विधि कभी -कभी अपवादों को क्यों फेंकती है?] हालांकि, Async void और Async कार्य विधियों के बीच महत्वपूर्ण अंतर को गलत समझना अप्रत्याशित त्रुटियों को जन्म दे सकता है। यह प्रश्न यह बताता है कि क्...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
वसंत सुरक्षा 4.1 और उससे अधिक में CORS मुद्दों को हल करने के लिए गाइड] इसे हल करने के लिए, आप एक कस्टम फ़िल्टर को लागू कर सकते हैं, जैसे कि अपने कोड स्निपेट में MyFilter। हालाँकि, आपने यह भी उल्लेख किया है कि यह फ़िल्टर...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
क्या जावा में कलेक्शन ट्रैवर्सल के लिए एक-प्रत्येक लूप और एक पुनरावृत्ति का उपयोग करने के बीच एक प्रदर्शन अंतर है?के लिए यह लेख इन दो दृष्टिकोणों के बीच दक्षता के अंतर की पड़ताल करता है। यह आंतरिक रूप से iterator का उपयोग करता है: सूची a = new ArrayList ...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
PHP का उपयोग करके MySQL में बूँदों (चित्र) को ठीक से कैसे डालें?] यह गाइड आपके छवि डेटा को सफलतापूर्वक संग्रहीत करने के लिए समाधान प्रदान करेगा। ImageStore (ImageId, Image) मान ('$ यह- & gt; image_id', ...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
फ़ायरफ़ॉक्स बैक बटन का उपयोग करते समय जावास्क्रिप्ट निष्पादन क्यों बंद हो जाता है?] यह समस्या क्रोम और इंटरनेट एक्सप्लोरर जैसे अन्य ब्राउज़रों में नहीं होती है। इस समस्या को हल करने के लिए और बाद के पृष्ठ के दौरे पर स्क्रिप्ट निष्पा...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
PostgreSQL में प्रत्येक अद्वितीय पहचानकर्ता के लिए अंतिम पंक्ति को कुशलता से कैसे पुनः प्राप्त करें?एक डेटासेट के भीतर प्रत्येक अलग पहचानकर्ता के साथ जुड़ी अंतिम पंक्ति। निम्नलिखित डेटा पर विचार करें: आईडी दिनांक एक और_info 1 2014-02-01 kjkj...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
चीनी भाषा का अध्ययन करें
- 1 आप चीनी भाषा में "चलना" कैसे कहते हैं? #का चीनी उच्चारण, #का चीनी सीखना
- 2 आप चीनी भाषा में "विमान ले लो" कैसे कहते हैं? #का चीनी उच्चारण, #का चीनी सीखना
- 3 आप चीनी भाषा में "ट्रेन ले लो" कैसे कहते हैं? #का चीनी उच्चारण, #का चीनी सीखना
- 4 आप चीनी भाषा में "बस ले लो" कैसे कहते हैं? #का चीनी उच्चारण, #का चीनी सीखना
- 5 चीनी भाषा में ड्राइव को क्या कहते हैं? #का चीनी उच्चारण, #का चीनी सीखना
- 6 तैराकी को चीनी भाषा में क्या कहते हैं? #का चीनी उच्चारण, #का चीनी सीखना
- 7 आप चीनी भाषा में साइकिल चलाने को क्या कहते हैं? #का चीनी उच्चारण, #का चीनी सीखना
- 8 आप चीनी भाषा में नमस्ते कैसे कहते हैं? 你好चीनी उच्चारण, 你好चीनी सीखना
- 9 आप चीनी भाषा में धन्यवाद कैसे कहते हैं? 谢谢चीनी उच्चारण, 谢谢चीनी सीखना
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
