सीएसएस सर्किल सीमा

Question

प्रत्येक गाइड जो मुझे मिलती है वह रेखा होती है और उसी रंग को भरती है। मैं चाहता हूं कि एक लाल रेखा और सफेद भरने वाला एक सर्कल है।

मैं कोशिश की है:

.circle { 
    border: red; 
    background-color: #FFFFFF; 
    height: 100px; 
    -moz-border-radius:75px; 
    -webkit-border-radius: 75px; 
    width: 100px; 
} 

लेकिन लाल बॉर्डर नहीं मिल सकता है?

Answer 1

http://jsbin.com/qamuyajipo/3/edit?html,output

.circle { 
    border: 1px solid red; 
    background-color: #FFFFFF; 
    height: 100px; 
    -moz-border-radius:75px; 
    -webkit-border-radius: 75px; 
    width: 100px; 
} 

Answer 2

आप सीमा की चौड़ाई सेट करने के लिए भूल गया!

.circle { 
 
    background-color:#fff; 
 
    border:1px solid red;  
 
    height:100px; 
 
    border-radius:50%; 
 
    -moz-border-radius:50%; 
 
    -webkit-border-radius:50%; 
 
    width:100px; 
 
}

<div class="circle"></div>

Answer 3

आप Border shorthand property में border width और border style गुण याद कर रहे हैं: चक्र पाने के लिए border:1px solid red;

यहाँ पूर्ण कोड को border: red; बदलें

.circle { 
 
    border: 2px solid red; 
 
    background-color: #FFFFFF; 
 
    height: 100px; 
 
    border-radius:50%; 
 
    width: 100px; 
 
}

<div class="circle"></div>

---

इसके अलावा, आप बॉर्डर-त्रिज्या संपत्ति के लिए प्रतिशत का उपयोग कर सकते हैं, जिससे कि मूल्य चक्र चौड़ाई/ऊंचाई की निर्भर नहीं है। यही कारण है कि मैंने सीमा-त्रिज्या के लिए 50% (border-radius inn pixels and percent here पर अधिक जानकारी) का उपयोग किया।

साइड नोट: अपने उदाहरण में, आप विक्रेता उपसर्गों whitch आप propably से पहले क्रोम 4 सफारी 4 के रूप में केवल ब्राउज़र की जरूरत नहीं है और Firefox 3.6 उन्हें इस्तेमाल (canIuse देखें) के बिना बॉर्डर-त्रिज्या संपत्ति निर्दिष्ट नहीं किया।

Answer 4

यहां एक jsfiddle है ताकि आप इस काम का एक उदाहरण देख सकें।

एचटीएमएल कोड:

<div class="circle"></div> 

सीएसएस कोड:

.circle { 
 
     /*This creates a 1px solid red border around your element(div) */ 
 
     border:1px solid red; 
 
     background-color: #FFFFFF; 
 
     height: 100px; 
 
     /* border-radius 50% will make it fully rounded. */ 
 
     border-radius: 50%; 
 
     -moz-border-radius:50%; 
 
     -webkit-border-radius: 50%; 
 
     width: 100px; 
 
    }

<div class='circle'></div>

Answer 5

इस प्रयास करें:

.cirlce { 
    height: 20px; 
    width: 20px; 
    padding: 5px; 
    text-align: center; 
    border-radius: 50%; 
    display: inline-block; 
    color:#fff; 
    font-size:1.1em; 
    font-weight:600; 
    background-color: rgba(0,0,0,0.1); 
    border: 1px solid rgba(0,0,0,0.2); 
    }