दो रंग सीमाएँ

Question

ग्राहक उभरे हुए लुक के लिए दो कलर बॉर्डर चाहते हैं। क्या मैं एक तत्व पर ऐसा कर सकता हूं? मैं व्यक्तिगत सीमाओं के साथ दो डोम तत्वों के ढेर से बचने की उम्मीद कर रहा था।

Comments

क्या आप प्रभाव को प्राप्त करने के लिए जावास्क्रिप्ट का उपयोग करने के लिए तैयार हैं? jquery.malsup.com/corner

— nopuck4you

Answer 1

हां: outlineसंपत्ति का उपयोग करें ; यह आपकी सीमा के बाहर दूसरी सीमा के रूप में कार्य करता है। खबरदार, ', यह हाशिए के साथ हाशिये, पैडिंग और ड्रॉप-शैडो में बातचीत कर सकता है। कुछ ब्राउज़रों में आपको एक ब्राउज़र-विशिष्ट उपसर्ग का उपयोग करना पड़ सकता है; यह सुनिश्चित करने के लिए कि यह उस पर चुनता है: -webkit-outlineऔर जैसे (हालांकि WebKit को विशेष रूप से इसकी आवश्यकता नहीं है)।

यह उस स्थिति में भी उपयोगी हो सकता है, जहां आप कुछ ब्राउज़रों के लिए रूपरेखा को बदलना चाहते हैं (जैसे कि यदि आप ड्रॉप छाया के साथ रूपरेखा को संयोजित करना चाहते हैं, तो WebKit में रूपरेखा छाया के अंदर है; फायरफाइट राशि में) बाहर, इसलिए -moz-outline: 0यह सुनिश्चित करने के लिए उपयोगी है कि आपको अपने सुंदर सीएसएस ड्रॉप छाया के आसपास एक गैनरली रेखा नहीं मिलती है)।

.someclass {
  border: 1px solid blue;
  outline: 1px solid darkblue;
}

संपादित करें: कुछ लोगों ने टिप्पणी की है कि outlineIE के साथ अच्छी तरह से कूदना नहीं है <8. जबकि यह सच है; IE <8 का समर्थन करना वास्तव में ऐसा कुछ नहीं है जो आपको करना चाहिए।

Comments

-1 "IE <8 का समर्थन करने के लिए वास्तव में कुछ ऐसा नहीं है जो आपको करना चाहिए"। IE6 का समर्थन नहीं करना ठीक हो सकता है। लेकिन IE7 का समर्थन नहीं करना हास्यास्पद है, एक गैर-तकनीकी दर्शकों के साथ कोई भी साइट इसे बर्दाश्त नहीं कर सकती है

— पेका

outlineCSS2 के बाद से चारों ओर है।

— BoltClock

+1 IE 7 का समर्थन नहीं करने के लिए, जबकि आपकी साइट को हमेशा काम करना चाहिए और IE 7 में यथोचित रूप से अच्छी तरह से देखना चाहिए, पूर्ण समर्थन आवश्यक नहीं है। खासकर अगर यह सिर्फ एक दो रंग की सीमा है। मैं व्यक्तिगत रूप से बॉक्स-शैडो और अन्य 'उन्नत' सुविधाओं का उपयोग कर रहा हूं। IE7 एक बॉक्स-छाया, ... बड़ी बात नहीं देख सकता। केवल IE7s quirks के आसपास काम करने के लिए कम अनुकूल, अत्यधिक जटिल या पुराना समाधान का उपयोग करने का कोई कारण नहीं है।

— मैरियन थेसेन

इसके अलावा, अच्छे उद्देश्यों के लिए इस संदर्भ को देखें डिजाइन उद्देश्यों के लिए रूपरेखा संपत्ति को हैक करने के लिए नहीं: outlinenone.com

— जोएल ग्लोवर

सावधानी का एक शब्द, outlineकी तुलना में कम बहुमुखी है border। विशेष रूप से, W3C कहता है : "नोट। रूपरेखा सभी पक्षों पर समान है। सीमाओं के विपरीत, कोई 'आउटलाइन-टॉप' या 'आउटलाइन-लेफ्ट' संपत्ति नहीं है ।" (जोर मेरा।)

— बॉब स्टीन

Answer 2

यह बहुत संभव है। यह सिर्फ एक छोटे सीएसएस चाल लेता है!

div.border {
  border: 1px solid #000;
  position: relative;
}

div.border:before {
  position: absolute;
  display: block;
  content: '';
  border: 1px solid red;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

<div class="border">Hi I have two border colors<br />I am also Fluid</div>

क्या यह वही है जिसको आप ढूंढ रहें थे।

Comments

वास्तव में यह मुश्किल है, लेकिन यह इनायत से अपमानित करता है और यहां तक ​​कि मेरे एचटीसी के स्टॉक ब्राउज़र (एंड्रॉइड) पर भी काम करता है! यदि आप उपयोग करते हैं border-radius, तो एक पिक्सेल द्वारा आंतरिक सीमा की त्रिज्या को कम करने की कोशिश करें , जो दो गोल सीमाओं के बीच अंतर को लगभग अस्वीकार कर देगा।

— फ्लू

यह अच्छा है। का उपयोग कर bottom:1pxके बजाय height:100%सिर्फ एक निचली सीमा के लिए :) मेरे लिए बेहतर काम किया

— निक

यदि आपके पास इसके लिए एक पैडिंग है div.border, तो मैंने पाया कि इसके लिए समान आयामों के साथ एक नकारात्मक मार्जिन जोड़कर div.border:before, सब कुछ इनलाइन रखने में मदद की। शायद यह करने के लिए एक बेहतर तरीका है? jsFiddle

— NW Tech

छद्म तत्वों का उपयोग करने के लिए +1। मुझे लगता है कि यह उत्तर

— विलीहैम टोटलैंड

यह भी खूब रही! :)

— बेन्किनी

Answer 3

एक और तरीका है box-shadow:

#mybox {
box-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
-moz-box-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
-webkit-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
}

<div id="mybox">ABC</div>

उदाहरण यहाँ देखें ।

Comments

मैं इसे पसंद करता हूं क्योंकि यह रूपरेखा पद्धति के विपरीत सीमा-त्रिज्या के साथ काम करता है

— जोहान

Answer 4

क्या आपने सीएसएस युक्ति के भीतर उपलब्ध विभिन्न सीमा शैलियों की कोशिश की है? पहले से ही दो बॉर्डर स्टाइल हैं जो आपकी आवश्यकता को समायोजित कर सकते हैं:

border-style: ridge;

या

border-style: groove;

Comments

यह वही था जो मुझे चाहिए था। (IE8 में <

— फ़ील्डसेट

Answer 5

रूपरेखा अच्छी है, लेकिन केवल तब जब आप चारों ओर की सीमा चाहते हैं।

यदि आप इसे केवल नीचे या ऊपर बनाना चाहते हैं, तो आप उपयोग कर सकते हैं

<style>

  #border-top {
  border-top: 1px solid  #ccc;
  box-shadow: inset 0 1px 0 #fff;
}
</style>

<p id="border-top">This is my content</p>

और नीचे के लिए:

<style>

      #border-bottom {
      border-top: 1px solid  #ccc;
      box-shadow: 0 1px 0 #fff;
    }
</style>

    <p id="border-bottom">This is my content</p>

आशा है कि यह मदद करता है।

Answer 6

बजाय असमर्थित और समस्याग्रस्त रूपरेखा का उपयोग करने के लिए

• पृष्ठभूमि-रंग + आंतरिक सीमा के लिए पैडिंग
• बाहरी के लिए सामान्य सीमा।

उदाहरण:

HTML:

<img src="http://cdn3.thumbs.common.smcloud.net/common/8/6/s/863444wpPN.jpg/r-0,500-n-863444wpPN.jpg" alt="malkovich" />

सीएसएस:

img {
    padding: 1px;
    background: yellow;
    border:1px solid black;
}

परीक्षण (JSFiddle) :

img {
  padding: 1px;
  background: yellow;
  border: 1px solid black;
}

<img src="http://cdn3.thumbs.common.smcloud.net/common/8/6/s/863444wpPN.jpg/r-0,500-n-863444wpPN.jpg" alt="malkovich" />

Comments

अच्छी तरह से काम करता है, लेकिन केवल अगर आपके पास पृष्ठभूमि के साथ सामग्री है।

— कलमे

Answer 7

अगर "एम्बॉसिंग" से आपका मतलब है कि दो सीमाओं पर एक दूसरे के चारों ओर दो अलग-अलग रंगों के साथ outlineसंपत्ति ( outline-left, outline-right....) है, लेकिन यह IE परिवार में खराब रूप से समर्थित है (अर्थात्, IE6 और 7 इसे बिल्कुल भी समर्थन नहीं करते हैं )। यदि आपको दो सीमाओं की आवश्यकता है, तो एक दूसरा आवरण तत्व वास्तव में सबसे अच्छा होगा।

यदि आप एक ही सीमा में दो रंगों का उपयोग करते हैं। उदाहरण के लिए उपयोग करें

border-right: 1px white solid;
border-left: 1px black solid;
border-top: 1px black solid;
border-bottom: 1px white solid;

विशेष देखते हैं border-stylesऔर साथ ही इस बात के लिए ( ridge, outsetऔर inset) पर वे मेरे अनुभव में ब्राउज़रों में भिन्नता है।

Comments

मेरा मानना ​​है कि वह जो पूछ रहा है वह कुछ ऐसा है border : black white; जिसका अर्थ है एक सीमा के लिए दो अलग-अलग रंगों को परिभाषित करना जो एक ही समय में क्रमिक रूप से दिखता है।

— तारिक

@ ब्रेवार्ड आह, मैं देख रहा हूं। यह सैद्धांतिक रूप से संभव outlineहोगा, लेकिन यह IE 18 में अच्छी तरह से काम नहीं करेगा <8

— Pekka

ध्यान दें कि केवल आउटलाइन है ... दुर्भाग्य से आउटलाइन-लेफ्ट, आउटलाइन-राइट, आउटलाइन-टॉप या आउटलाइन-बॉटम जैसी कोई चीज नहीं है।

— डेविड शेरेट

Answer 8

संभव नहीं है, लेकिन आपको यह देखने के लिए जांचना चाहिए कि क्या border-styleमान inset, outsetया कुछ अन्य, आपके द्वारा वांछित प्रभाव को पूरा करते हैं .. ( मुझे संदेह है कि हालांकि )

CSS3 में सीमा-छवि गुण हैं, लेकिन मुझे अभी तक ब्राउज़रों से समर्थन के बारे में पता नहीं है ( http://www.css3.info/preview/border-image/ पर अधिक जानकारी )।

Comments

प्रोग्रामिंग की दुनिया में कुछ भी असंभव नहीं है: अच्छी तरह से मैं इस कथन को हर समय बनाना पसंद करता हूं :)

— तारिक

Answer 9

सरलता से लिखिए

style="border:medium double;"

html टैग के लिए

Comments

यह दो सीमाओं को देता है लेकिन उनके बीच एक रंग है।

— विलीह टोटलैंड

Answer 10

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

<html>
<head>
<title>Two Colors</title>
<style type="text/css">

.two-colors {
background: none repeat scroll 0% 0% rgb(245, 245, 245); border-color: rgba(111,111,111,0.2) transparent;
 padding: 4px; outline: 1px solid green;
}

</style>

<style type="text/css">
      body {
        padding-top: 20px;
        padding-bottom: 40px;
        background-color:yellow;        
      }
    </style>

</head>
<body>
<a target="_blank" href="people.htm">
  <img class="two-colors" src="people.jpg" alt="Klematis" width="213" height="120" />
  </a>

</body>
</html>

Answer 11

यह एक अच्छा प्रभाव पैदा करता है।

<div style="border: 1px solid gray; padding: 1px">
<div style="border: 1px solid gray">
   internal stuff
</div>
</div>