सीएसएस डबल सीमा (2 रंग) रूपरेखा का उपयोग किए बिना?

मैं सोच रहा था कि आप क्या सोचते हैं कि एक div के चार रंगों के साथ डबल सीमा प्राप्त करने का सबसे आसान तरीका है? मैंने एक साथ सीमा और रूपरेखा का उपयोग करने की कोशिश की और यह फ़ायरफ़ॉक्स में काम किया, लेकिन रूपरेखा आईई में काम नहीं कर रही है और यह एक तरह की समस्या है। इस बारे में जाने के लिए कोई अच्छा तरीका है?सीएसएस डबल सीमा (2 रंग) रूपरेखा का उपयोग किए बिना?

यह मेरे पास था लेकिन रूपरेखा आईई के साथ काम नहीं करती है: रूपरेखा: 2 पीएक्स ठोस # 36 एफ; सीमा: 2 पीएक्स ठोस # 3 9 0;

धन्यवाद।

स्रोत

2013-02-06 zProgrammer

आप छद्म तत्वों का उपयोग करके कई सीमाएं जोड़ सकते हैं, और उन्हें अपनी मूल सीमा के आस-पास स्थानांतरित कर सकते हैं। कोई अतिरिक्त मार्कअप नहीं। क्रॉस-ब्राउज़र संगत, यह सीएसएस 2.1 के आसपास रहा है। मैंने आपके लिए jsfiddle पर डेमो फेंक दिया .... नोट, उदाहरण के लिए सीमा रंगों के बीच की दूरी है। आप पूर्ण स्थिति में पिक्सल की संख्या को बदलकर इसे बंद कर सकते हैं।

.border 
{ 
    border:2px solid #36F; 
    position:relative; 
    z-index:10 
} 

.border:before 
{ 
    content:""; 
    display:block; 
    position:absolute; 
    z-index:-1; 
    top:2px; 
    left:2px; 
    right:2px; 
    bottom:2px; 
    border:2px solid #36F 
}

http://jsfiddle.net/fvHJq/1/

स्रोत

2013-02-06 18:05:42 albert

संदर्भ के लिए, यह आईई 7 के साथ काम नहीं करता है (जो 'पहले नहीं' ज्यादातर मामलों में, यदि कोई है)। IE8 और बाद में ठीक होना चाहिए, हालांकि ... और इसे HTML के साथ गड़बड़ करने की आवश्यकता नहीं है। :) – cHao

धन्यवाद! अच्छी व्याख्या भी। – zProgrammer

@ जैक, बस यह इंगित करते हुए कि यह समाधान उस लिंक में नंबर 2 था जिसे मैंने आपको कई अलग-अलग तरीकों से विस्तारित किया था। –

एक बहुत ही सरल समाधान जिसे आप फॉल-बैक के रूप में उपयोग कर सकते हैं यदि दो divs का उपयोग करने के लिए कुछ और नहीं होगा। आपका मुख्य div, और उसके बाद एक खाली व्यक्ति बस इसे लपेटता है जिसे आप दूसरी सीमा निर्धारित करने के लिए उपयोग कर सकते हैं।

स्रोत

2013-02-06 17:52:39

हाँ, जो मैं करने जा रहा था। अगर कुछ आसान सीएसएस है तो बस उत्सुक है, मैं इसे करने के लिए देख रहा हूं। – zProgrammer

मुझे नहीं पता कि। मुझे लगता है कि आप इसे पहले ही पढ़ चुके हैं, लेकिन बस इसमें शामिल हैं: http://www.impressivewebs.com/multiple-borders-css/ –

2 सीमा के लिए उपयोग बॉक्स छाया।

div.double-border { 
    border: 1px solid #fff; 
    -webkit-box-shadow: 0px 0px 0px 1px #000; 
    -moz-box-shadow: 0px 0px 0px 1px #000; 
    box-shadow: 0px 0px 0px 1px #000; 
}

इस मामले बॉक्स छाया में बॉर्डर-त्रिज्या प्रॉपर्टी को नकारने नहीं है की तरह रूपरेखा इस प्रश्न के लिए पार्टी के लिए देर

स्रोत

2015-08-18 14:07:59

करता है, लेकिन मुझे लगता है कि मैं इस कहीं रिकॉर्ड चाहिए।

abs(n) 
    if n < 0 
     (-1*n) 
    else 
     n 

horizBorder(n, backgroundColor) 
    $shadow = 0 0 0 0 transparent 
    $sign = (n/abs(n)) 
    for $i in ($sign..n) 
     /* offset-x | offset-y | blur-radius | spread-radius | color */ 
     $shadow = $shadow, 0 (2*$i - $sign)px 0 0 #000, 0 (2*$i)px 0 0 backgroundColor 
    return $shadow

फिर,

$background: #FFF // my background was white in this case and I wanted alternating black/white borders 

.border-bottom 
    box-shadow: horizBorder(5, $background) 
.border-top 
    box-shadow: horizBorder(-5, $background) 
.border-top-and-bottom 
    box-shadow: horizBorder(5, $background), horizBorder(-5, $background)

स्रोत

2016-03-06 16:26:22 chas

बॉक्स छाया के साथ

आप के रूप में कई अलग अलग प्राप्त कर सकते हैं: आप कम या स्टाइलस की तरह कुछ में एक स्केलेबल समारोह जो (यहाँ स्टाइलस) सीमाओं के किसी भी संख्या का निर्माण करेगा कर सकते हैं जैसा कि आप चाहते हैं रंग सीमाओं। उदाहरण के लिए:

#mydiv{ 
    height: 60px; 
    width: 60px; 
    box-shadow: inset 0 0 0 5px #00ff00, inset 0 0 0 10px #0000ff; 
} 

<div id="mydiv">&nbsp;</div>

https://jsfiddle.net/aruanoc/g5e5pzny

स्रोत

2017-01-25 15:42:33 aruanoc

एक छोटी सी चाल;)

box-shadow: 
0 0 0 2px #000, 
0 0 0 3px #000, 
0 0 0 9px #fff, 
0 0 0 10px #fff, 
0 0 0 16px #000, 
0 0 0 18px #000;

स्रोत

2017-02-15 22:52:08 TheCrazyProfessor

.border{ 
 
    width: 200px; 
 
    height: 200px; 
 
    background: #f06d06; 
 
    position: relative; 
 
    border: 5px solid blue; 
 
    margin: 20px; 
 
} 
 
.border:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: -15px; 
 
    left: -15px; 
 
    right: -15px; 
 
    bottom: -15px; 
 
    background: green; 
 
    z-index: -1; 
 
}

<div class="border"> 
 
    
 
</div>

एकल border.then के लिए vales border:2px solid #000 दिया .border के लिए वर्ग के नाम का उपयोग तुम चाहते हो टी दूसरी सीमा को .border:after मानने के लिए प्रयास करें यदि आपको कोड नमूना उदाहरण

स्रोत

2017-08-16 07:41:27

सीएसएस डबल सीमा (2 रंग) रूपरेखा का उपयोग किए बिना?

उत्तर

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