ग्राहक उभरे हुए लुक के लिए दो कलर बॉर्डर चाहते हैं। क्या मैं एक तत्व पर ऐसा कर सकता हूं? मैं व्यक्तिगत सीमाओं के साथ दो डोम तत्वों के ढेर से बचने की उम्मीद कर रहा था।
ग्राहक उभरे हुए लुक के लिए दो कलर बॉर्डर चाहते हैं। क्या मैं एक तत्व पर ऐसा कर सकता हूं? मैं व्यक्तिगत सीमाओं के साथ दो डोम तत्वों के ढेर से बचने की उम्मीद कर रहा था।
जवाबों:
हां: outline
संपत्ति का उपयोग करें ; यह आपकी सीमा के बाहर दूसरी सीमा के रूप में कार्य करता है। खबरदार, ', यह हाशिए के साथ हाशिये, पैडिंग और ड्रॉप-शैडो में बातचीत कर सकता है। कुछ ब्राउज़रों में आपको एक ब्राउज़र-विशिष्ट उपसर्ग का उपयोग करना पड़ सकता है; यह सुनिश्चित करने के लिए कि यह उस पर चुनता है: -webkit-outline
और जैसे (हालांकि WebKit को विशेष रूप से इसकी आवश्यकता नहीं है)।
यह उस स्थिति में भी उपयोगी हो सकता है, जहां आप कुछ ब्राउज़रों के लिए रूपरेखा को बदलना चाहते हैं (जैसे कि यदि आप ड्रॉप छाया के साथ रूपरेखा को संयोजित करना चाहते हैं, तो WebKit में रूपरेखा छाया के अंदर है; फायरफाइट राशि में) बाहर, इसलिए -moz-outline: 0
यह सुनिश्चित करने के लिए उपयोगी है कि आपको अपने सुंदर सीएसएस ड्रॉप छाया के आसपास एक गैनरली रेखा नहीं मिलती है)।
.someclass {
border: 1px solid blue;
outline: 1px solid darkblue;
}
संपादित करें: कुछ लोगों ने टिप्पणी की है कि outline
IE के साथ अच्छी तरह से कूदना नहीं है <8. जबकि यह सच है; IE <8 का समर्थन करना वास्तव में ऐसा कुछ नहीं है जो आपको करना चाहिए।
outline
CSS2 के बाद से चारों ओर है।
outline
की तुलना में कम बहुमुखी है border
। विशेष रूप से, W3C कहता है : "नोट। रूपरेखा सभी पक्षों पर समान है। सीमाओं के विपरीत, कोई 'आउटलाइन-टॉप' या 'आउटलाइन-लेफ्ट' संपत्ति नहीं है ।" (जोर मेरा।)
यह बहुत संभव है। यह सिर्फ एक छोटे सीएसएस चाल लेता है!
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>
क्या यह वही है जिसको आप ढूंढ रहें थे।
border-radius
, तो एक पिक्सेल द्वारा आंतरिक सीमा की त्रिज्या को कम करने की कोशिश करें , जो दो गोल सीमाओं के बीच अंतर को लगभग अस्वीकार कर देगा।
bottom:1px
के बजाय height:100%
सिर्फ एक निचली सीमा के लिए :) मेरे लिए बेहतर काम किया
एक और तरीका है 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>
उदाहरण यहाँ देखें ।
क्या आपने सीएसएस युक्ति के भीतर उपलब्ध विभिन्न सीमा शैलियों की कोशिश की है? पहले से ही दो बॉर्डर स्टाइल हैं जो आपकी आवश्यकता को समायोजित कर सकते हैं:
border-style: ridge;
या
border-style: groove;
रूपरेखा अच्छी है, लेकिन केवल तब जब आप चारों ओर की सीमा चाहते हैं।
यदि आप इसे केवल नीचे या ऊपर बनाना चाहते हैं, तो आप उपयोग कर सकते हैं
<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>
आशा है कि यह मदद करता है।
बजाय असमर्थित और समस्याग्रस्त रूपरेखा का उपयोग करने के लिए
उदाहरण:
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) :
अगर "एम्बॉसिंग" से आपका मतलब है कि दो सीमाओं पर एक दूसरे के चारों ओर दो अलग-अलग रंगों के साथ 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
) पर वे मेरे अनुभव में ब्राउज़रों में भिन्नता है।
border : black white;
जिसका अर्थ है एक सीमा के लिए दो अलग-अलग रंगों को परिभाषित करना जो एक ही समय में क्रमिक रूप से दिखता है।
outline
होगा, लेकिन यह IE 18 में अच्छी तरह से काम नहीं करेगा <8
संभव नहीं है, लेकिन आपको यह देखने के लिए जांचना चाहिए कि क्या border-style
मान inset
, outset
या कुछ अन्य, आपके द्वारा वांछित प्रभाव को पूरा करते हैं .. ( मुझे संदेह है कि हालांकि )
CSS3 में सीमा-छवि गुण हैं, लेकिन मुझे अभी तक ब्राउज़रों से समर्थन के बारे में पता नहीं है ( http://www.css3.info/preview/border-image/ पर अधिक जानकारी )।
सरलता से लिखिए
style="border:medium double;"
html टैग के लिए
आप उपयोग कर सकते हैं
<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>