केवल एक सीमा पर रूपरेखा

Question

एक HTML तत्व में इन्सेट सीमा को लागू करने के लिए कैसे करें, लेकिन केवल इसके एक तरफ। अब तक, मैं ऐसा करने के लिए एक छवि का उपयोग कर रहा हूं (जीआईएफ/पीएनजी) जिसे मैं पृष्ठभूमि के रूप में उपयोग करता हूं और इसे खींचता हूं (दोहराना-एक्स) और मेरे ब्लॉक के शीर्ष से थोड़ी दूर स्थिति रखता हूं। हाल ही में, मैंने रूपरेखा सीएसएस संपत्ति की खोज की, जो बहुत बढ़िया है! लेकिन पूरे ब्लॉक को सर्कल करने लगता है ... क्या यह संभवतः केवल एक सीमा पर ऐसा करने के लिए इस रूपरेखा संपत्ति का उपयोग करना संभव है? इसके अलावा, यदि नहीं, तो क्या आपके पास कोई सीएसएस चाल है जो पृष्ठभूमि छवि को प्रतिस्थापित कर सकती है? (ताकि मैं बाद में सीएसएस, आदि का उपयोग कर रूपरेखा के रंगों को वैयक्तिकृत कर सकूं)। अग्रिम धन्यवाद!

यहाँ क्या हासिल करना कोशिश कर रहा हूँ की एक छवि है: http://exiledesigns.com/stack.jpg

Answer 1

रूपरेखा वास्तव में apply to the whole element करता है।

अब जब मैं आपकी छवि देखता हूं, तो इसे प्राप्त करने का तरीका यहां दिया गया है।

.element { 
 
    padding: 5px 0; 
 
    background: #CCC; 
 
} 
 
.element:before { 
 
    content: "\a0"; 
 
    display: block; 
 
    padding: 2px 0; 
 
    line-height: 1px; 
 
    border-top: 1px dashed #000; 
 
} 
 
.element p { 
 
    padding: 0 10px; 
 
}

<div class="element"> 
 
    <p>Some content comes here...</p> 
 
</div>

(या external demo. देखें)

सभी आकार और रंग सिर्फ प्लेसहोल्डर हैं, आप सटीक वांछित परिणाम मैच के लिए इसे बदल सकते हैं।

महत्वपूर्ण नोट:। इस के लिए काम करने के लिए display:block; (div के लिए डिफ़ॉल्ट) होना चाहिए। यदि यह मामला नहीं है, तो कृपया अपना पूरा कोड प्रदान करें, ताकि मैं एक विशिष्ट उत्तर विस्तृत कर सकूं।

Answer 2

केवल एक तरफ outline अभ्यस्त अगर मैं एक ठीक से हो रही अपनी टिप्पणी काम आप border-left/right/top/bottom

उपयोग कर सकते हैं

Answer 3

आप एक तरफ एक रूपरेखा बनाने के लिए box-shadow का उपयोग कर सकते हैं। outline की तरह, box-shadow बॉक्स मॉडल के आकार को नहीं बदलता है।

यह शीर्ष पर एक लाइन कहते हैं:

box-shadow: 0 -1px 0 #000; 

मैं एक jsFiddle जहां आप इसे कार्रवाई में देख सकते हैं बनाया है।

---

इनसेट

एक इनसेट सीमा के लिए, इनसेट कीवर्ड का उपयोग करें। यह शीर्ष पर एक इन्सेट लाइन रखता है:

box-shadow: 0 1px 0 #000 inset; 

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

box-shadow: 0 1px 0 #000 inset, 
      1px 0 0 #000 inset; 

, MDN page की जाँच: यह ऊपर और बाईं तरफ एक इनसेट लाइन डालता है।

Answer 4

छाया (सीमा की तरह) + सीमा

border-bottom: 5px solid #fff; 
box-shadow: 0 5px 0 #ffbf0e; 

Answer 5

HTML के बारे में महान बात यह है के साथ प्रयास करें/सीएसएस वहां आम तौर पर एक से अधिक तरीके से एक ही प्रभाव को प्राप्त करने के लिए है। यहाँ एक और समाधान है करता है कि आप क्या चाहते हैं:

<nav id="menu1"> 
    <ul> 
     <li><a href="#">Menu Link 1</a></li> 
     <li><a href="#">Menu Link 2</a></li> 
    </ul> 
</nav> 

nav { 
    background:#666; 
    margin:1em; 
    padding:.5em 0; 
} 
nav ul { 
    border-top:1px dashed #fff; 
    list-style:none; 
    padding:.5em; 
} 
nav ul li { 
    display:inline-block; 
} 
nav ul li a { 
    color:#fff; 
} 

http://jsfiddle.net/10basetom/uCX3G/1/