Vòng kết nối CSS có đường viền

Question

Mọi hướng dẫn tôi tìm thấy đều có đường kẻ và tô màu giống nhau. Tất cả tôi muốn là một vòng tròn với một đường màu đỏ và điền màu trắng.

Tôi đã thử:

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

Nhưng không thể có được những đường viền màu đỏ?

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

Bạn quên để thiết lập chiều rộng của biên giới! Thay đổi border: red;-border:1px solid red;

Ở đây đầy đủ các mã để có được những vòng tròn:

.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

Bạn đang thiếu border width và border style thuộc tính trong Border shorthand property:

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

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

---

Ngoài ra, Bạn có thể sử dụng tỷ lệ phần trăm cho các tài sản border-radius để giá trị không phụ thuộc của vòng tròn chiều rộng/chiều cao. Đó là lý do tại sao tôi sử dụng 50% cho bán kính biên giới (thông tin thêm về border-radius inn pixels and percent here).

Lưu ý bên: Trong ví dụ của bạn, bạn không chỉ định thuộc tính bán kính đường viền mà không có tiền tố nhà cung cấp, bạn không cần chỉ trình duyệt trước khi chrome 4 safari 4 và Firefox 3.6 sử dụng chúng (xem canIuse).

Answer 4

Đây là jsfiddle để bạn có thể xem ví dụ về thao tác này.

HTML code: Mã

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

CSS:

.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

Hãy thử điều này:

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