CSS Cerc cu margine (Programare, Css, Forme Css)

Stre a intrebat.

Toate ghidurile pe care le-am găsit au linia și umplutura de aceeași culoare. Tot ce vreau este un cerc cu o linie roșie și umplutură albă.

Am încercat:

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

Dar nu pot obține marginea roșie?

Comentarii

  • unde doriți să apară linia roșie? luați în considerare adăugarea și a html-ului dvs.  > Por designarti.
6 răspunsuri
Sebastian Brosch

Ai uitat să setezi lățimea marginii! Modifică border: red; în border:1px solid red;

Aici codul complet pentru a obține cercul:

web-tiki

Vă lipsește lățimea marginii și stilul de margine în fișierul Proprietatea prescurtată Border :


De asemenea, puteți utiliza procente pentru proprietatea border-radius, astfel încât valoarea să nu depindă de lățimea/înălțimea cercului. Acesta este motivul pentru care am folosit 50% pentru border-radius (mai multe informații despre border-radius în pixeli și procente).

Notă: În exemplul dvs., nu ați specificat proprietatea border-radius fără prefixele furnizorului, ceea ce probabil că nu este necesar, deoarece numai browserele anterioare la Chrome 4, Safari 4 și Firefox 3.6 le utilizează (a se vedea se poate utiliza).

Nalan Madheswaran

Încercați acest lucru:

.circle {
    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);
}

Ya Zhuang

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;
}

Comentarii

  • mulțumesc pentru editare @sebastianbrosch am scris prea mult markdown în ultima vreme 🙂 –  > Por Ya Zhuang.
  • @web-tiki nuh… păstrez doar modificarea minimă –  > Por Ya Zhuang.
Florin Pop

Iată un jsfiddle ca să puteți vedea un exemplu de funcționare.

Cod HTML:

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

Cod CSS:

Joshua Johns