2013-06-03 12 views
11

मैं बस वहाँ div अंदर "सीमा" के साथ एक div बनाने के लिए एक तरीका है सोच रहा था अंदर एक सीमा। मेरा मतलब यह है कि: मेरे पास 200px का div है उदाहरण के लिए और मैं चाहता हूं कि सीमा 200 पिक्सेल के अंदर हो, बिना किसी सीमा के।कैसे कर सकते हैं मैं सेटअप div

मैं आकार के किनारे पर नहीं एक सीमा के साथ एक div के प्रभाव को प्राप्त करने के लिए, लेकिन 5px अधिक अंदर की जरूरत है। एक छवि सैकड़ों शब्दों से अधिक बात कर सकते हैं

मैं चाहता हूँ इस:

http://jsfiddle.net/hpLYD/1/

सीएसएस:

.circle { 
    border-radius: 50%; 
    width: 200px; 
    height: 200px; 
    background: red; 
    border: 3px solid blue; 
} 

पैडिंग

circle inside-borded

यहाँ मेरी कोड है संपत्ति का विस्तार हो रहा है सीमा सहित पूरे div।

मैं कैसे इस आशय केवल सीएसएस का उपयोग कर प्राप्त कर सकते हैं? क्या यह संभव है?

+0

नोट:: उदाहरण देखें 'सीमा: डॉटेड धराशायी /;' फ़ायरफ़ॉक्स में काम नहीं कर रहा है, यह के रूप में ठोस renders वैसे भी (बॉर्डर-त्रिज्या है जब आवेदन किया है)। – pwnjack

उत्तर

17

आप इस CSS3 संपत्ति box-shadow उपयोग कर सकते हैं। अपने सीएसएस के लिए निम्न जोड़ें:

box-shadow: 0px 0px 0px 5px #f00; 

jsFiddle example

+1

धन्यवाद, वही है जो मैं चाहता था, छाया सर्कल के 200 पीएक्स कठिन से अधिक है, लेकिन उस संपत्ति के साथ मैं आसानी से इसे 195px तक कम कर सकता हूं और इसे 3px छाया और 2px सीमा को मापने के लिए रख सकता हूं! धन्यवाद। – pwnjack

+0

बेनामी डरावनी डाउनवॉटर देखभाल इस मुद्दे को समझाने के लिए? – j08691

1

आपको कोई ऐसा तत्व के भीतर एक सीमा में असमर्थ हैं, लेकिन आप box-shadow उपयोग कर सकते हैं कि प्रभावी बनाने के लिए:

.circle { 
    border-radius: 50%; 
    width: 190px; 
    height: 190px; 
    background: red; 
    border: 3px solid blue; 
    box-shadow: 0px 0px 0px 10px red; /* 10px box-shadow */ 
} 

JSFiddle example

ध्यान दें कि यह एक CSS3 शैली की संपत्ति है और सभी ब्राउज़रों पर समर्थित नहीं है। आपको कुछ ब्राउज़रों (-webkit, -moz, आदि) पर विक्रेता-उपसर्ग का उपयोग करने की आवश्यकता हो सकती है। समर्थन के लिए http://caniuse.com/#search=box-shadow देखें।

+0

मुझे विक्रेता-उपसर्गों के बारे में पता है, मैंने इसे सरल रखने के लिए अपने उदाहरण में उनका उपयोग नहीं किया था, लेकिन इसे ठीक करने के लिए धन्यवाद, और उस "कैनियस" वेबसाइट को साझा करने के लिए, यह बहुत उपयोगी है! ;) – pwnjack

+0

मैं आपके उदाहरण कोड पर 'बॉक्स-छाया' संपत्ति के लिए इसे और अधिक उल्लेख कर रहा था। विशेष रूप से '-webkit-box-shadow' और' -moz-box-shadow'। –

0

मैं तुम्हें चक्र के लिए एक और वर्ग जोड़ सकते हैं लगता है।

मैंने यह आपके लिए किया है।

मैं (कि मुझे बोली न) लगता है कि आप एक गोल की सीमा के एक गद्दी जोड़ सकते हैं नहीं है, लेकिन मैं के बारे में 30 सेकंड में बेला किया था।

.scirle {see fiddle} 

http://jsfiddle.net/hpLYD/7/embedded/result/

6

जबकि बॉक्स छाया सबसे अधिक संभावना जाने के लिए सबसे अच्छा तरीका है, लोगों के लिए आवश्यक है कि प्रश्न है कि सीमा 200px से अधिक नहीं था भूल करने लगते हैं। वास्तव में इसे प्राप्त करने के लिए आप बॉक्स-छाया विशेषता पर inset पैरामीटर का उपयोग कर सकते हैं (जो एक आंतरिक छाया बना देगा)।

आपको box-sizing से border-box को बदलने की आवश्यकता होगी, जैसे कि आकार सीमा के आनुपातिक है और सामग्री नहीं।

Here's an JSFiddle with the result

.circle { 
    border-radius: 50%; 
    width: 200px; 
    height: 200px; 
    background: red; 
    border: 3px solid red; 
    box-shadow: 0px 0px 0px 5px blue inset; 
    box-sizing: border-box; 
} 
+0

बॉक्स आकार देने वाली संपत्ति को शुरू करने के लिए धन्यवाद, यह उपसर्ग आयामों में उस प्रभाव को प्राप्त करने के लिए बहुत उपयोगी है। – pwnjack

0

समस्या एक सीमा स्क्रीन अचल संपत्ति कि क्या हम इसे पसंद करते हैं या नहीं लेता है।

यदि 1px सीमा 100px तत्व पर है, भले ही हम इसे अंदर प्रकट कर सकें, तब भी वह तत्व केवल 98px होगा। लेकिन वास्तविकता में हम जो अटक गए हैं वह एक 100 पीएक्स तत्व है जो वास्तव में बाहर की सीमाओं के कारण 102 पीएक्स है। सीमा-बॉक्स नवीनतम क्रोम में सीमाओं के लिए कुछ भी नहीं प्रतीत होता है - वे हमेशा बाहर दिखाई देते हैं।

इसे हल करने का एक आसान तरीका एक बिल्कुल स्थित सीएसएस :after या :before तत्व का उपयोग कर रहा है, इसका मूल रूप से मतलब है कि सीमा से कोई भी स्क्रीन स्थान गुम हो गया है।

.border{ position: relative; } 
.border{ content:''; position:absolute; left:0; right:0; top:0; bottom:0; border:1px dashed rgba(50,50,50,0.5); } 
2
<div class="mydiv"></div> 

.mydiv{ 
    position:relative; 
    height:150px; 
    width:200px; 
    background:#f00; 
} 
.mydiv:before{ 
    position:absolute; 
    content:''; 
    position: absolute; 
    top: 10px; 
    bottom: 10px; 
    left:10px; 
    right: 10px; 
    border:1px solid #daa521; 
} 

Here's an JSFiddle with the result

enter image description here

+0

यह वास्तव में एक अच्छा समाधान है जो आपको दिशान का धन्यवाद करता है – MehranTM

संबंधित मुद्दे