मैं सीएसएस के साथ एक पारदर्शी सीमा कैसे बनाऊं?

Question

मेरे पास एक liस्टाइल है जो इस प्रकार है:

li{
    display:inline-block;
    padding:5px;
    border:1px solid none;
}
li:hover{
    border:1px solid #FC0;
}

जब मैं liसीमा पर मँडराता हूँ तो liचारों ओर बदलाव किए बिना दिखाई देता है । क्या ऐसा 'बॉर्डर' संभव है जो दिखाई न दे?

Answer 1

आप रंग के रूप में "पारदर्शी" का उपयोग कर सकते हैं। IE के कुछ संस्करणों में, जो काले रंग में आता है, लेकिन मैंने IE6 दिनों से इसका परीक्षण नहीं किया है।

http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php

Comments

खैर यह ie8, मोज़िला, ओपेरा और क्रोम पर काम करता है, मेरे लिए काफी अच्छा है, मैंने इसे सफारी पर आज़माया नहीं, लेकिन मैं इसे बहुत ज्यादा पसंद नहीं करता। आपका बहुत बहुत धन्यवाद!

— विलियम कैलेजा

हाँ, यह विशेष रूप से IE6 है कि यह काम नहीं करता है। IE7 ठीक है।

— बोबिन्स

यह मेरे लिए दुर्भाग्य से काम नहीं किया है। मैं पूरी तरह से सीमाओं से बाहर किए गए तत्वों के बाद छद्म का उपयोग कर रहा हूं ... क्या गड़बड़ है!

— एलेक्स

Answer 2

आप में से कई लोगों को पारदर्शी एक के बजाय अपारदर्शी सीमा का समाधान खोजने के लिए यहां उतरना चाहिए। उस स्थिति में आप उपयोग कर सकते हैं rgba, जहां aखड़ा है alpha।

.your_class {
    height: 100px;
    width: 100px;
    margin: 100px;
    border: 10px solid rgba(255,255,255,.5);
}

डेमो

यहाँ, आप बदल सकते हैं opacityकी borderसे0-1

---

यदि आप पूरी तरह से पारदर्शी सीमा चाहते हैं, तो उपयोग करने के लिए सबसे अच्छी चीज है transparent, जैसेborder: 1px solid transparent;

Comments

और आप इस उपकरण का उपयोग हेक्स से आरजीबीए रंग में परिवर्तित करने के लिए कर सकते हैं ... hexcolortool.com ... जहाँ आप वैकल्पिक रूप से URL में हेक्स रंग निर्दिष्ट कर सकते हैं, जैसे ... hexcolortool.com/#ffcc00

— क्लेरीरे

Answer 3

आप सीमा को हटा सकते हैं और पैडिंग बढ़ा सकते हैं:

li {
  display: inline-block;
  padding: 6px;
  border-width: 0px;
}

li:hover {
  border: 1px solid #FC0;
  padding: 5px;
}

<ul>
  <li>Hovering is great</li>
</ul>

Comments

अच्छी तरह से यह एक आकर्षण की तरह काम करता है, मुझे आश्चर्य है कि अगर कोई क्लीनर तरीका था तो इसे कैसे करें? अगर यह अदृश्य सीमा के लिए संभव था तो? सुझाव के लिए फिर से धन्यवाद।

— विलियम कैलेजा

यह मेरे लिए एक अधिक सुसंगत समाधान की तरह लगता है

— NIBlyPig

बस आपको किस तरह की आवश्यकता है इसके विपरीत काम करता है! फिक्स्ड। इसके अलावा, मैं पारदर्शी रंग के साथ जाऊँगा। मैं अभी इसके बारे में नहीं जानता था: D

— मैट एलेन

सीमा घटाना और पैडिंग बढ़ाना यदि आप चाहें, उदाहरण के लिए (मेरा मामला), पूरी तरह से क्लिक करने योग्य <a/>बॉक्स का कोई फायदा नहीं है । सीमा तत्व (इसलिए क्लिक करने योग्य) की है, जबकि पैडिंग माता-पिता की है।

— निको

Answer 4

हे यह सबसे अच्छा समाधान है जो मैंने कभी अनुभव किया है .. यह CSS3 है

अपनी div या कहीं भी आप बॉर्डर ट्रासपरेंट लगाना चाहते हैं, उसके बाद प्रॉपर्टी का उपयोग करें

जैसे

div_class { 
 border: 10px solid #999;
 background-clip: padding-box; /* Firefox 4+, Opera, for IE9+, Chrome */
}

यह काम करेगा ..

Answer 5

हां, आप उपयोग कर सकते हैं border: 1px solid transparent

एक अन्य समाधान outlineहैवर का उपयोग करना (और सीमा को 0 पर सेट करना) जो दस्तावेज़ प्रवाह को प्रभावित नहीं करता है:

li{
    display:inline-block;
    padding:5px;
    border:0;
}
li:hover{
    outline:1px solid #FC0;
}

एनबी। आप केवल एक विशिष्ट संपत्ति के रूप में रूपरेखा निर्धारित कर सकते हैं, न कि व्यक्तिगत पक्षों के लिए। यह केवल डिबगिंग के लिए उपयोग करने के लिए है, लेकिन यह अच्छी तरह से काम करता है।

Comments

आपका बहुत बहुत धन्यवाद! अधिक विकल्प मेरे पास बेहतर हैं

— विलियम कैलेजा

Answer 6

चूंकि आपने एक टिप्पणी में कहा था कि आपके पास जितने अधिक विकल्प हैं, बेहतर है, यहां एक और एक है।

CSS3 में, दो अलग-अलग तथाकथित "बॉक्स मॉडल" हैं। एक सीमा और पैडिंग को एक ब्लॉक तत्व की चौड़ाई में जोड़ता है, जबकि दूसरा नहीं करता है। आप बाद को निर्दिष्ट करके उपयोग कर सकते हैं

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

फिर, आधुनिक ब्राउज़रों में, तत्व में हमेशा समान चौड़ाई होगी। यानी, यदि आप होवर पर एक सीमा लागू करते हैं, तो सीमा की चौड़ाई तत्व की समग्र चौड़ाई में नहीं जोड़ेगी; सीमा को "अंदर" तत्व जोड़ा जाएगा, इसलिए बोलने के लिए। हालाँकि, अगर मुझे सही याद है, तो आपको इसके लिए widthस्पष्ट रूप से काम करना होगा। जो शायद इस विशेष मामले में आपके लिए एक विकल्प नहीं है, लेकिन आप इसे भविष्य की स्थितियों के लिए ध्यान में रख सकते हैं।

Comments

पारदर्शी बॉर्डर के लिए यह एक उपयोग मामला हो सकता है - होवर पर बॉर्डर लगाने के बजाय, अपने रंग को पारदर्शी से ऐसी चीज़ में बदलें जिसे आप देख सकते हैं।

— डेवलेली

Answer 7

यह ब्लॉग प्रविष्टिborder-color: transparent IE6 में अनुकरण करने का एक तरीका है । नीचे दिए गए उदाहरण में "hasLayout" फिक्स शामिल है जो ब्लॉग प्रविष्टि टिप्पणियों में लाया गया है:

/* transparent border */
.testDiv {
    width: 200px;
    height: 200px;
    border: solid 10px transparent;
}
/* IE6 fix */
*html .testDiv {
    zoom: 1;
    border-color: #FEFEFE;
    filter: chroma(color=#FEFEFE);
}

यह सुनिश्चित करें कि border-colorIE6 फिक्स में उपयोग किया गया .testDivतत्व में कहीं भी उपयोग नहीं किया गया है। मैं से उदाहरण बदल pinkकरने के लिए #FEFEFE, क्योंकि वह भी कम लगती है उपयोग होने की संभावना।

Answer 8

इसका सबसे आसान समाधान rgbaरंग के रूप में उपयोग करना है: border-color: rgba(0,0,0,0);यह पूरी तरह से पारदर्शी सीमा रंग है।

Answer 9

पारदर्शी संपत्ति का उपयोग करें

border-color : transparent;