सीएसएस सर्कल विभिन्न रंगों की दो सीमाओं के साथ या कम से कम

Question

जैसा दिखता है मेरे पास एक सीमा वाला सर्कल है, लेकिन मैं जानना चाहता हूं कि अलग-अलग रंगों की दो सीमाओं के साथ एक सर्कल प्राप्त करने के लिए वैसे भी है या नहीं। मैं सीएसएस चक्र का निर्माण इस प्रकार निम्नलिखित हैं:

.circle { 
    width: 20px; 
    height: 20px; 
    border-radius: 12px; 
    border: 1.5px solid #fff; 
    font-family: Cambria; 
    font-size: 11px; 
    color: white; 
    line-height: 20px; 
    text-align: center; 
    background: #3E78B2; 
} 

.circle:hover { 
    width: 27px; 
    height: 27px; 
    border-radius: 18px; 
    font-size: 12px; 
    color: white; 
    line-height: 27px; 
    text-align: center; 
    background: #3E78B2; 
} 

Here is link to jsFiddle

आप देख सकते हैं वर्तमान में यह कुछ सफेद सीमा है। मैं सफेद सीमा के शीर्ष पर एक और सीमा जोड़ना चाहता हूं।

अगर आपके पास कोई विचार/सुझाव हैं तो कृपया मुझे बताएं।

Answer 1

हाय यू यह भी कर सकते हैं:

.container { 
    background-color: grey; 
    height: 200px; 
    padding:10px; // ADD THIS ALSO 
} 
.circle { 
    width: 20px; 
    height: 20px; 
    border-radius: 12px; 
    border: 1.5px solid #fff; 
    font-family: Cambria; 
    font-size: 11px; 
    color: white; 
    line-height: 20px; 
    text-align: center; 
    background: #3E78B2; 
    box-shadow: 0 0 0 3px #002525; // JUST ADD THIS LINE AND MODIFY YOUR COLOR 
} 

लाभ यह है कि आप भी एक कलंक प्रभाव डाल सकते हैं, इस तरह से बदल रहा है:

box-shadow: 0 0 3px 3px #002525; 

Answer 2

अगर मैं तुम्हें सही ढंग से समझ, मुझे लगता है कि आप इन पंक्तियों के साथ कुछ करने के लिए देख रहे हैं: http://jsfiddle.net/QCVjr/1/

.circle { 
    width: 20px; 
    height: 20px; 
    border-radius: 12px; 
    border: 1.5px solid #000; 
    font-family: Cambria; 
    font-size: 11px; 
    color: white; 
    line-height: 20px; 
    text-align: center; 
    background: #fff; 
    position: relative; 
    z-index: 1; 
} 
.circle:before { 
    position: absolute; 
    right: 2px; 
    top: 2px; 
    left: 2px; 
    bottom: 2px; 
    content: ''; 
    background: #3E78B2; 
    border-radius: 25px; 
    z-index: -1; 
} 
.circle:hover { 
    width: 27px; 
    height: 27px; 
    border-radius: 18px; 
    font-size: 12px; 
    color: white; 
    line-height: 27px; 
    text-align: center; 
    background: #fff; 
} 

आप देखेंगे कि मैं अपने मूल पृष्ठभूमि रंग ले लिया और :before छद्म में जोड़ा तत्व, पृष्ठभूमि में #fff स्थानांतरित कर दिया, और मूल तत्व के सीमा रंग को अपने अन्य सीमा रंग (इस उदाहरण में, #000) बनाया। सही लेयरिंग प्राप्त करने के लिए z-index ईएस दोनों की आवश्यकता है।