सीएसएस का उपयोग करके किसी भी तत्व को बॉर्डर कैसे प्रदान किया जाए बिना सीमा-चौड़ाई को तत्व की पूरी चौड़ाई में जोड़े?
जैसे फोटोशॉप में हम स्ट्रोक दे सकते हैं- अंदर, केंद्र और बाहर
मुझे लगता है कि डिफ़ॉल्ट सीएसएस बॉर्डर प्रॉपर्टीज फोटोशॉप में केंद्र की तरह है, क्या मैं सही हूं?
मैं बॉक्स के अंदर सीमा देना चाहता हूं बाहर नहीं। और बॉर्डर चौड़ाई को बॉक्स चौड़ाई में शामिल नहीं करना चाहते हैं।
जवाबों:
outline:1px solid white;यह अतिरिक्त चौड़ाई और ऊंचाई नहीं जोड़ेगा।
सीएसएस बॉक्स-साइज़िंग देखें ...
बॉक्स-साइज़िंग CSS3 प्रॉपर्टी ऐसा कर सकती है। बॉर्डर-बॉक्स मान (सामग्री-बॉक्स डिफ़ॉल्ट के विपरीत) अंतिम रेंडर बॉक्स को घोषित चौड़ाई बनाता है, और बॉक्स के अंदर कोई भी बॉर्डर और पेडिंग कट जाता है। अब आप अपने तत्व को पिक्सेल-आधारित पैडिंग और बॉर्डर सहित 100% चौड़ाई में सुरक्षित रूप से घोषित कर सकते हैं, और अपने लक्ष्य को पूरी तरह से पूरा कर सकते हैं।
मैं आपके लिए इसे संभालने के लिए एक मिश्रण बनाने का सुझाव दूंगा। आप W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp पर बॉक्स-साइज़िंग के बारे में अधिक जानकारी प्राप्त कर सकते हैं
box-sizingपर्याप्त होगा।
आपके इच्छित ब्राउज़र समर्थन के आधार पर आप box-shadowसंपत्ति का उपयोग कर सकते हैं।
आप ब्लर वैल्यू को 0 पर सेट कर सकते हैं और उसके बाद कभी भी कितनी मोटाई तक फैल सकते हैं। बॉक्स छाया के बारे में महान बात यह है कि आप इसे नियंत्रित कर सकते हैं कि क्या यह बाहर (डिफ़ॉल्ट रूप से) या अंदर (उपयोग करके) हैinset संपत्ति है।
उदाहरण:
box-shadow: 0 0 0 1px black; // Outside black border 1pxया
box-shadow: 0 0 0 1px white inset; // Inside white border 1pxबॉक्स छाया का उपयोग करने का एक बड़ा फायदा यह है कि आप कई बॉक्स छाया का उपयोग करके रचनात्मक प्राप्त कर सकते हैं:
box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;केवल एक चीज जो मैं नहीं कह सकता हूं कि इससे क्या फर्क पड़ेगा जो प्रदर्शन को बुद्धिमान बना देगा। यदि आप एक बार में स्क्रीन पर इस तकनीक का उपयोग करने वाले सैकड़ों तत्व थे, तो मैं इसे एक मुद्दा बन सकता हूं।
मैं उसी मुद्दे में भाग गया।
.right-border {
position: relative;
}
.right-border:after {
content: '';
display: block;
position: absolute;
top: 0; right: 0;
width: 1px;
height: 100%;
background: #e0e0e0;
}यह उत्तर आपको एक एकल पक्ष निर्दिष्ट करने की अनुमति देता है। और IE8 + में काम करेगा - बॉक्स-शैडो का उपयोग करने के विपरीत।
निश्चित रूप से अपने छद्म तत्वों के गुणों को बदलें क्योंकि आपको एक विशिष्ट पक्ष को एकल करने की आवश्यकता है।
* नया और बेहतर *
&:before {
content: '';
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}यह सीमा का उपयोग करने और एक बॉक्स के कई पक्षों को हिट करने की क्षमता देता है।
box-sizing: border-boxएक बॉर्डर बनाने के लिए इनवाइट का उपयोग करें डिव चौड़ाई को संशोधित किए बिना एक इनसाइड ।
outlineएक बॉर्डर OUTSIDE बनाने के लिए डिव चौड़ाई को संशोधित किए बिना एक div का उपयोग करें ।
यहाँ एक उदाहरण: https://jsfiddle.net/4000cae9/1/
नोट:
border-boxवर्तमान में यह IE द्वारा समर्थित नहीं है
सहयोग:
http://caniuse.com/#feat=outline
http://caniuse.com/#search=border-box
#test, #test2 {
width: 100px;
height:100px;
background-color:yellow;
}
#test {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 10px dashed blue;
}
#test2 {
outline: 10px dashed red;
}
<p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
<div id="test">border-box</div>
<p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
<div id="test2">outline</div>जैसा कि एबेंसन ने कहा, आप एक रूपरेखा का उपयोग कर सकते हैं, लेकिन एक गोचा यह है कि ओपेरा "गैर-आयताकार आकार" बना सकता है। एक और विकल्प जो काम करने लगता है, वह है नकारात्मक मार्जिन का उपयोग करना, जैसे कि यह सीएसएस:
div {
float:left;
width: 50%;
border:1px solid black;
margin: -1px;
}इस HTML के साथ:
<body>
<div>A block</div>
<div>Another block</div>
</body>एक अन्य कम स्वच्छ विकल्प html में अतिरिक्त मार्कअप जोड़ना है। उदाहरण के लिए, आप एक बाहरी तत्व की चौड़ाई निर्धारित करते हैं और सीमा को भीतर तक जोड़ते हैं। सीएसएस:
.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }और HTML:
<body>
<div class="outer">
<div class="inner">A block</div>
</div>
<div class="outer">
<div class="inner">Another block</div>
<div>
</body>बॉर्डर न होने पर पैडिंग का इस्तेमाल करें। बॉर्डर होने पर गद्दी निकालें।
.myDiv {
width: 100px;
height: 100px;
padding-left: 2px;
padding-right: 2px;
}
.myDiv:hover {
padding-left: 0;
padding-right: 0;
border-left: 2px solid red;
border-right: 2px solid red;
}अनिवार्य रूप से, बस 2px गद्दी को 2px सीमाओं के साथ बदलें। Div का आकार समान रहता है।
आपके मामले में आप इसे पैडिंग से आधी सीमा घटाकर इसे ठग सकते हैं? (-2.5 पैडिंग से यदि आपकी सीमा 5px चौड़ी है, तो आपके पास बॉक्स की कुल चौड़ाई को कम करने के लिए नकारात्मक पैडिंग नहीं हो सकती है)। आप कुल बॉक्स को समान आकार रखने के लिए मार्जिन में अतिरिक्त 2.5px जोड़ सकते हैं।
मैं वास्तव में इस सुझाव को पसंद नहीं करता, लेकिन मुझे नहीं लगता कि कोई रास्ता है जो इस सफाई से निपटता है।
इस प्रकार, आप प्रसिद्ध IE बॉक्स मॉडल बग के समान प्राप्त करने का प्रयास कर रहे हैं ? यह संभव नहीं है। या आप केवल विंडोज पर IE के साथ ग्राहकों का समर्थन करना चाहते हैं और एक सिद्धांत का चयन करते हैं जो IE को quirksmode में मजबूर करता है ।
एक अन्य विकल्प, यदि आपकी पृष्ठभूमि का रंग ठोस है:
body { background-color: #FFF; }
.myDiv {
width: 100px;
height: 100px;
border: 3px solid #FFF; // Border is essentially invisible since background is also #FFF;
}
.myDiv:hover {
border-color: blue; // Just change the border color
}#FFFपारदर्शी का विकल्प चुन सकते हैं और फिर आपको दो मूल्यों को बदलने के लिए याद रखने की आवश्यकता नहीं है। आपके सुझाव का यह लाभ है कि यदि आपको धराशायी सीमा की आवश्यकता है तो यह काम करेगा जहां box-shadowइस संबंध में कमी है।
रूपरेखा: 3 पीएक्स सॉलिड ब्लैक || सीमा: 3px ठोस काला
div{
height:50px;
width:150px;
text-align:center;
}
div{ /*this is what you need ! */
outline:1px solid black
}<div>
hello world
</div>