Làm thế nào để tạo các vòng tròn nét đứt với khoảng cách đồng đều?

Tôi muốn tạo một vòng tròn chấm bằng CSS và tạo nó với quy trình sau.

Mặc dù vòng tròn nét đứt có thể được hiển thị theo quy trình này, Khoảng cách giữa điểm cuối và điểm bắt đầu của đường đứt nét trở nên hẹp và khoảng cách không đồng nhất.

.c {
  width: 500px;
  height: 500px;
  border-width: 15px;
  border-style: dashed;
  border-radius: 600px;
}

<div class="c"></div>

Mở rộng đoạn trích

Có cách nào để làm cho khoảng cách đồng nhất? chúng ta cũng có thể kiểm soát khoảng cách giữa các dấu gạch ngang?

Nếu không thể với CSS một mình, chúng tôi đang xem xét sử dụng JavaScript hoặc một cái gì đó tương tự.

javascript html css

— Temani Afif
nguồn

Đối với những gì nó có giá trị, chỉ Chrome (và bản sao, tôi đoán) dường như có vấn đề với mã của bạn.

— Álvaro González

Vâng. Có vẻ tốt với tôi

— Dâu tây

Dưới đây là phiên bản tối ưu hóa của conic-gradient()giải pháp, nơi bạn có thể dễ dàng kiểm soát số lượng dấu gạch ngang và khoảng cách giữa

Hiển thị đoạn mã

.box {
  --d:4deg; /* distance between dashes */
  --n:30;   /* number of dashes */
  --c:#000; /* color of dashes */
  width: 180px;
  display:inline-block;
  border-radius:50%;
  border:2px solid transparent; /* control the thickness of border*/
  background: 
    linear-gradient(#fff,#fff) padding-box padding-box,
    repeating-conic-gradient(
        var(--c)    0 calc(360deg/var(--n) - var(--d)), 
        transparent 0 calc(360deg/var(--n)) 
    ) border-box;
}

/* keep the element square */
.box:before {
  content:"";
  display:block;
  padding-top:100%;
}

<div class="box"></div>

<div class="box" style="--n:20;border-width:5px;width:150px"></div>

<div class="box" style="--n:8;--d:20deg;border-width:5px;width:150px"></div>

<div class="box" style="--n:10;--d:15deg;border-width:3px;width:100px"></div>

<div class="box" style="--n:10;--d:20deg;border-width:3px;width:100px"></div>

Mở rộng đoạn trích

Để có sự minh bạch đầy đủ, chúng tôi xem xét mask

Hiển thị đoạn mã

.box {
  --d:4deg; /* distance between dashes */
  --n:30;   /* number of dashes */
  --c:#000; /* color of dashes */
  --b:2px;   /* control the thickness of border*/
  
  width: 180px;
  display:inline-block;
  border-radius:50%;
  background: 
    repeating-conic-gradient(
        var(--c)    0 calc(360deg/var(--n) - var(--d)), 
        transparent 0 calc(360deg/var(--n)));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--b)),#fff calc(100% - var(--b) + 1px));
          mask:radial-gradient(farthest-side,transparent calc(100% - var(--b)),#fff calc(100% - var(--b) + 1px));
}

/* keep the element square */
.box:before {
  content:"";
  display:block;
  padding-top:100%;
}


body {
  background:linear-gradient(to right,yellow,pink);
}

<div class="box"></div>

<div class="box" style="--n:20;--b:5px;width:150px;--c:blue"></div>

<div class="box" style="--n:8;--d:20deg;--b:10px;width:130px;--c:red"></div>

<div class="box" style="--n:18;--d:12deg;--b:8px;width:100px;--c:green"></div>

<div class="box" style="--n:10;--d:20deg;--b:3px;width:100px;--c:purple"></div>

Mở rộng đoạn trích

Để làm cho mọi thứ hài hước, chúng ta thậm chí có thể xem xét một màu sắc phức tạp hơn cho dấu gạch ngang:

Hiển thị đoạn mã

.box {
  --d:4deg; /* distance between dashes */
  --n:30;   /* number of dashes */
  --b:2px;   /* control the thickness of border*/
  
  width: 180px;
  display:inline-block;
  border-radius:50%;
  background:linear-gradient(red,blue);
  -webkit-mask:
      radial-gradient(farthest-side,transparent calc(100% - var(--b)),#fff calc(100% - var(--b) + 1px)),
      repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--d)),transparent 0 calc(360deg/var(--n)));
  -webkit-mask-composite: source-in;
          mask:
      radial-gradient(farthest-side,transparent calc(100% - var(--b)),#fff calc(100% - var(--b) + 1px)),
      repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--d)),transparent 0 calc(360deg/var(--n)));
          mask-composite: intersect;
}

/* keep the element square */
.box:before {
  content:"";
  display:block;
  padding-top:100%;
}


body {
  background:linear-gradient(to right,yellow,pink);
}

<div class="box"></div>

<div class="box" style="--n:20;--b:5px;width:150px;background:conic-gradient(green,orange,black)"></div>

<div class="box" style="--n:8;--d:20deg;--b:10px;width:130px;background:conic-gradient(black,white,black)"></div>

<div class="box" style="--n:18;--d:12deg;--b:8px;width:100px;background:linear-gradient(60deg,red 50%,green 0)"></div>

<div class="box" style="--n:10;--d:20deg;--b:3px;width:100px;background:#fff"></div>

Mở rộng đoạn trích

Bạn có thể chắc chắn muốn một số nội dung bên trong để áp dụng tốt hơn mặt nạ / nền trên phần tử giả để tránh che giấu nội dung:

Hiển thị đoạn mã

.box {
  --d:4deg; /* distance between dashes */
  --n:30;   /* number of dashes */
  --b:2px;   /* control the thickness of border*/
  
  width: 180px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  font-size:35px;
  border-radius:50%;
  position:relative;
}
.box::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  border-radius:inherit;
  background:var(--c,linear-gradient(red,blue));
  -webkit-mask:
      radial-gradient(farthest-side,transparent calc(100% - var(--b)),#fff calc(100% - var(--b) + 1px)),
      repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--d)),transparent 0 calc(360deg/var(--n)));
  -webkit-mask-composite: source-in;
          mask:
      radial-gradient(farthest-side,transparent calc(100% - var(--b)),#fff calc(100% - var(--b) + 1px)),
      repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--d)),transparent 0 calc(360deg/var(--n)));
          mask-composite: intersect;
  
}

/* keep the element square */
.box:before {
  content:"";
  padding-top:100%;
}


body {
  background:linear-gradient(to right,yellow,pink);
}

<div class="box">19</div>

<div class="box" style="--n:20;--b:5px;width:150px;--c:conic-gradient(green,orange,black)">17</div>

<div class="box" style="--n:8;--d:20deg;--b:10px;width:130px;--c:conic-gradient(black,white,black)">5</div>

<div class="box" style="--n:18;--d:12deg;--b:8px;width:100px;--c:linear-gradient(60deg,red 50%,green 0)">9</div>

<div class="box" style="--n:10;--d:20deg;--b:3px;width:100px;--c:#fff">13</div>

Mở rộng đoạn trích

Câu hỏi liên quan để có thêm ý tưởng CSS để đạt được kết quả tương tự: Biểu đồ chỉ có CSS - Làm thế nào để thêm khoảng cách / phần đệm giữa các lát? . Bạn sẽ tìm thấy nhiều cách được hỗ trợ hơn conic-gradient()(thực tế nó không hoạt động trên Firefox) nhưng bạn được yêu cầu sử dụng nhiều mã không giống như giải pháp trên, nơi chỉ cần một yếu tố.

Sử dụng SVG, bạn cũng sẽ cần một số tính toán để đảm bảo bạn có khoảng cách đồng đều:

svg {
  width:200px;
}

<svg viewBox="-3 -3 106 106">
  <!-- 
    The circumference of the circle is 2*PI*R ~ 314.16
    if we want N dashed we use d=314.16/N
    For N = 20 we have d=15.71
    For a gap of 5 we will have "10.71,5" (d - gap,gap)
  -->
  <circle cx="50" cy="50" r="50" 
    stroke-dasharray="10.71, 5" 
    fill="transparent" 
    stroke="black" 
    stroke-width="5" />
</svg>

Mở rộng đoạn trích

Với các biến CSS, chúng tôi có thể làm cho nó dễ dàng hơn nhưng nó không được hỗ trợ trong tất cả các trình duyệt (thực tế nó không hoạt động trong Firefox)

Hiển thị đoạn mã

svg {
  --n:20; /* number of dashes*/
  --d:5;  /* distance */
  width:200px;
}

svg circle {
   stroke-dasharray:calc((2*3.14*50)/var(--n) - var(--d)), var(--d); 
}

<svg viewBox="-3 -3 106 106">
  <circle cx="50" cy="50" r="50" fill="transparent" stroke="black" stroke-width="5" />
</svg>

<svg viewBox="-3 -3 106 106" style="width:150px;--n:20;--d:10">
  <circle cx="50" cy="50" r="50" fill="transparent" stroke="red"   stroke-width="5" />
</svg>

<svg viewBox="-3 -3 106 106" style="width:100px;--n:8;--d:15">
  <circle cx="50" cy="50" r="50" fill="transparent" stroke="green" stroke-width="5" />
</svg>

Mở rộng đoạn trích

Chúng ta cũng có thể dễ dàng sử dụng SVG làm nền để làm cho mọi thứ linh hoạt hơn:

Hiển thị đoạn mã

.box {
  display:inline-block;
  width:200px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-3 -3 106 106"><circle cx="50" cy="50" r="50" fill="transparent" stroke="black" stroke-width="5" style="stroke-dasharray:29.25, 10" /></svg>') center/contain;
}

.box:before {
  content:"";
  display:block;
  padding-top:100%;
}

<div class="box">

</div>

<div class="box" style="width:150px;">

</div>

<div class="box" style="width:100px;">

</div>

Mở rộng đoạn trích

Khi được sử dụng làm nền, bạn cần đặt thủ công giá trị để bạn sẽ cần một nền khác nhau mỗi lần. Chúng ta chỉ có thể làm cho màu sắc dễ thay đổi bằng cách sử dụng SVG làm mặt nạ;

Hiển thị đoạn mã

.box {
  display:inline-block;
  width:200px;
  position:relative;
}

.box:before {
  content:"";
  display:block;
  padding-top:100%;
}

.box::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  background:var(--c,red);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-3 -3 106 106"><circle cx="50" cy="50" r="50" fill="transparent" stroke="black" stroke-width="5" style="stroke-dasharray:29.25, 10" /></svg>') center/contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-3 -3 106 106"><circle cx="50" cy="50" r="50" fill="transparent" stroke="black" stroke-width="5" style="stroke-dasharray:29.25, 10" /></svg>') center/contain;
}

<div class="box">

</div>

<div class="box" style="width:150px;--c:linear-gradient(60deg,green 50%,yellow 0);">

</div>

<div class="box" style="width:100px;--c:linear-gradient(red,blue)">

</div>

Mở rộng đoạn trích

— Temani Afif
nguồn

Mặc dù đây là những cách thú vị để làm điều này trông đẹp mắt trong Chrome, nhưng chỉ có các chức năng phiên bản SVG cơ bản đầu tiên của bạn trong Firefox. Đáng chú ý, Firefox (ngay cả phiên bản Nightly) không hỗ trợ conic-gradient()hoặc repeating-conic-gradient(). Vì vậy, đây có thể là một cách tiếp cận khả thi trong tương lai, nhưng nó không phải là thứ có thể sử dụng vào lúc này, nếu chức năng trình duyệt chéo là mong muốn.

— Makyen

Cho rằng câu hỏi Mã OP hoạt động chính xác trong Firefox (nghĩa là vấn đề đã nêu của họ không tồn tại trong Firefox), nhưng trong Chrome, có lẽ nên tìm hiểu sự khác biệt giữa ít nhất là Chrome (+ nhái) và Firefox, trong khi cung cấp mã có chức năng ở cả hai (hoặc ít nhất là nêu rõ những gì có thể được sử dụng bây giờ có hỗ trợ trình duyệt chéo).

— Makyen

@Makyen trong khi mã OP hoạt động tốt trong Firefox, tôi đang cố gắng tập trung vào phần điều khiển khoảng trống vì với đường viền cơ bản, chúng ta không thể kiểm soát các khoảng trống. Tôi cũng đang thêm phần tô màu. Tôi đang cố gắng để làm cho nó một câu trả lời chung chung. Liên quan đến độ dốc, vâng, Firefox thiếu hỗ trợ nhưng tôi khá chắc chắn rằng nó sẽ đến sớm (tôi vẫn ngạc nhiên khi họ đến muộn, Chrome đã hỗ trợ việc này từ gần hai năm). Tôi đã liên kết với một câu hỏi khác để biết nhiều cách hỗ trợ hơn nhưng nó không rõ ràng lắm. Sẽ cập nhật nó.

— Temani Afif

Sử dụng stroke-dasharrayvới SVG.

svg {
  width: 20vmax;
  height: 20vmax;
}

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="48" stroke-dasharray="10, 4" fill="transparent" stroke="purple" stroke-width="5" />
</svg>

Mở rộng đoạn trích

Hoặc bạn có thể sử dụng radial-gradient(), các repeating-conic-gradient()chức năng mà không cần Firefox.

.c {
  width: 20vmax;
  height: 20vmax;
  background-image: radial-gradient(#fff 68%, transparent 68% 70%, #fff 70%),
    repeating-conic-gradient(#000 0% 3%, transparent 3% 5%);
}

<div class="c"></div>

Mở rộng đoạn trích

— sanriot
nguồn

conic-gradienttrở nên

— lởm chởm