Cách dễ dàng hơn để tạo div vòng tròn hơn là sử dụng một hình ảnh?

Tôi tự hỏi liệu có cách nào dễ dàng hơn để tạo div tròn hơn những gì tôi đang làm bây giờ không.

Hiện tại, tôi chỉ tạo một hình ảnh cho mỗi kích thước khác nhau, nhưng thật khó chịu khi làm điều này.

Có cách nào sử dụng CSS để tạo div là hình tròn và tôi có thể chỉ định bán kính không?

Đây là bản demo: http://jsfiddle.net/thentydot/JJytE/1170/

CSS:

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}
.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

HTML:

<div class="circleBase type1"></div>

<div class="circleBase type2"></div><div class="circleBase type2"></div>

<div class="circleBase type3"></div>

Để làm việc này trong IE8 trở lên , bạn phải tải xuống và sử dụng CSS3 PIE . Bản demo của tôi ở trên sẽ không hoạt động trong IE8, nhưng đó chỉ là do jsFiddle không lưu trữ PIE.htc.

Bản demo của tôi trông như thế này:

Đặt bán kính đường viền của mỗi bên của một phần tử thành 50% sẽ tạo hiển thị vòng tròn ở bất kỳ kích thước nào:

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px; 
  /* width and height can be anything, as long as they're equal */
}

Thử cái này

.iphonebadge {
  border-radius:99px;
 -moz-border-radius:99px;
 -webkit-border-radius:99px;
  background:red;
  color:#fff;
  border:3px #fff solid;
  background-color: #e7676d;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e7676d), to(#b7070a)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #e7676d, #b7070a); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image: -moz-linear-gradient(top, #e7676d, #b7070a); /* FF3.6 */
  background-image: -ms-linear-gradient(top, #e7676d, #b7070a); /* IE10 */
  background-image: -o-linear-gradient(top, #e7676d, #b7070a); /* Opera 11.10+ */
  background-image: linear-gradient(top, #e7676d, #b7070a);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e7676d', EndColorStr='#b7070a'); 
 -webkit-box-shadow: 0px 2px 4px #000000; /* Saf3-4 */
 -moz-box-shadow: 0px 2px 4px #000000; /* FF3.5 - 3.6 */
  box-shadow: 0px 2px 4px #000000; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
  display:inline-block;
  padding:2px 2px 2px 2px ;
  margin:3px;
  font-family:arial;
  font-weight:bold;
   }

Nó thực sự có thể.

Xem: Mẹo CSS: Cách tạo vòng kết nối không có hình ảnh . Xem bản demo .

Nhưng được cảnh báo, về cơ bản, nó có những nhược điểm nghiêm trọng về khả năng tương thích, bạn đang làm một con mèo sủa.

Xem nó làm việc ở đây

Như bạn sẽ thấy bạn chỉ cần thiết lập heightvà widthmột nửaborder-radius

Chúc may mắn!

Ngoài ra còn có [ý tưởng tồi] về việc sử dụng một số div (1+) ngang hoặc dọc để tạo một vòng tròn. Plugin jQuery này sử dụng phương pháp này để xây dựng các hình dạng khác nhau.

Cho chiều rộng và chiều cao tùy theo kích thước, nhưng giữ cả hai bằng nhau

.circle {
  background-color: gray;
  height: 400px;
  width: 400px;
  border-radius: 100%;
}

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

.fa-circle{
  color: tomato;
}

div{
  font-size: 100px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><i class="fa fa-circle" aria-hidden="true"></i></div>

Chỉ muốn đề cập đến một giải pháp khác trả lời câu hỏi "Cách dễ dàng hơn để tạo div vòng tròn hơn là sử dụng hình ảnh?" đó là sử dụng FontAwgie.

Bạn nhập tệp css fontawgie hoặc từ CDN tại đây

và sau đó bạn chỉ cần:

<div><i class="fa fa-circle" aria-hidden="true"></i></div>

và bạn có thể cung cấp cho nó bất kỳ màu nào bạn muốn bất kỳ kích thước phông chữ.

Bạn có thể thử radial-gradientchức năng CSS:

.circle {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: #ffffff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 17%, #ff0a0a 19%, #ff2828 40%, #000000 41%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

Áp dụng nó cho một divlớp:

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

Giả sử bạn có hình ảnh này:

để tạo một vòng tròn từ đây bạn chỉ cần thêm

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px; 
}

Vì vậy, nếu bạn có một div bạn có thể làm điều tương tự.

Kiểm tra ví dụ dưới đây:

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px; 
  animation: stackoverflow-example infinite 20s linear;
  pointer-events: none;
}

@keyframes stackoverflow-example {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<div>
  <img class="circle" src="https://www.sitepoint.com/wp-content/themes/sitepoint/assets/images/icon.javascript.png">
</div>

Bạn có thể sử dụng bán kính nhưng nó sẽ không hoạt động trên IE : border-radius: 5px 5px;.

về cơ bản, điều này sử dụng vị trí của div tuyệt đối để đặt một ký tự tại các tọa độ đã cho. Vì vậy, sử dụng phương trình tham số cho một vòng tròn, bạn có thể vẽ một vòng tròn. nếu bạn thay đổi vị trí của div thành tương đối, nó sẽ dẫn đến một làn sóng hình sin ...

về bản chất chúng ta đang vẽ đồ thị phương trình bằng cách lạm dụng thuộc tính vị trí. Tôi không rành về css, vì vậy ai đó chắc chắn có thể làm cho điều này thanh lịch hơn. thưởng thức.

cái này hoạt động trên tất cả các trình duyệt và thiết bị di động (mà tôi biết). tôi sử dụng nó trên trang web của riêng tôi để vẽ các làn sóng văn bản hình sin (www.cpixel.com). nguồn gốc của mã này được tìm thấy ở đây: www.mathopenref.com/coordcirclealerskym.html

    <html>
    <head></head>
    <body>
    <script language="Javascript">

    var x_center = 50; //0 in both x_center and y_center will place the center
    var y_center = 50; // at the top left of the browser
    var resolution_step = 360; //how many times to stop along the circle to plot your character.
    var radius = 50; //how big ya want your circle?
    var plot_character = "·"; //could use any character here, try letters/words for cool effects
    var div_top_offset=10;
    var div_left_offset=10;
    var x,y;

    for ( var angle_theta = 0;  angle_theta < 2 * Math.PI;  angle_theta += 2 * Math.PI/resolution_step ){
        x = x_center + radius * Math.cos(angle_theta);
        y = y_center - radius * Math.sin(angle_theta);
        document.write("<div style='position:absolute;top:" + (y+div_top_offset) + ";left:"+ (x+div_left_offset) + "'>" + plot_character + "</div>");
    }

    </script>
    </body>
    </html>

Thêm csstài sản của:

border-radius: 50%;

để bất kỳ div làm cho nó tròn.

Đối với vòng tròn, tạo một phần tử div và sau đó nhập width = 2 lần bán kính đường viền = 2 lần đệm. Ngoài ra line-height = 0 Ví dụ: với 50px là bán kính của vòng tròn, đoạn mã dưới đây hoạt động tốt:

width: 100px;
padding: 50px 0;
border: solid;
line-height: 0px;
border-radius: 50px;