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

Question 1

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

यहां एक ऐसी छवि है जो हासिल करने की कोशिश कर रहा है: http://exiledesigns.com/stack.jpg

Question 2

रूपरेखा वास्तव में पूरे तत्व पर लागू होती है ।

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

.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>

स्निपेट का विस्तार करें

(या बाहरी डेमो देखें )

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

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

Question 3

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

यह शीर्ष पर एक पंक्ति डालता है:

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

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

इनसेट

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

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

अल्पविराम से अलग किए गए कथनों का उपयोग करके कई पंक्तियों को जोड़ा जा सकता है। यह शीर्ष और बाईं ओर एक इनसेट लाइन डालता है:

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

कैसे box-shadowकाम करता है, इस बारे में अधिक जानकारी के लिए एमडीएन पृष्ठ देखें ।

Question 4

शैडो (लाइक बॉर्डर) + बॉर्डर के साथ आज़माएं

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

Question 5

मुझे पता है यह पुराना है। लेकिन हाँ। मैं जियोना जवाब की तुलना में बहुत छोटा समाधान पसंद करता हूं

[contenteditable] {
    border-bottom: 1px solid transparent;
    &:focus {outline: none; border-bottom: 1px dashed #000;}
}

Question 6

मैं अपने इनपुट क्षेत्र को एक सीमा देना पसंद करता हूं, फोकस पर रूपरेखा को हटा दें, और इसके बजाय सीमा को "रेखांकित" करें:

input {
  border: 1px solid grey;

  &:focus {
    outline: none;
    border-left: 1px solid violet;
  }
 }

आप इसे पारदर्शी सीमा के साथ भी कर सकते हैं:

input {
  border: 1px solid transparent;

  &:focus {
    outline: none;
    border-left: 1px solid violet;
  }
 }

Question 7

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

<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/

Question 8

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

अगर मैं ठीक से अपनी टिप्पणी कर रहा हूँ

यहाँ छवि विवरण दर्ज करें