如何使用 HTML5 和 CSS3 建立帶有部分邊框的圓形？

在 HTML5 / CSS3 中建立帶有部分邊框的圓形

確實可以使用 HTML5 和 CSS3 建立帶有部分邊框的圓形。一種有效的技巧是使用多層遮罩來達到所需的效果。

2024 解：

此方法利用兩層遮罩，無需 JavaScript，額外元素，或偽元素。即使元素具有半透明背景，它仍然有效。它涉及：

1. 建立一個圓形元素（任意寬度，長寬比為1，邊框半徑為50%），具有指定的邊框。
2. 定義圓錐梯度蒙版相對於邊框，覆蓋元素區域的特定百分比（例如， 17%)。
3. 新增僅限於填充框的全覆蓋遮罩層。

這是一個 CSS 程式碼片段範例：

<code class="css">.circular-progress {
  border: solid 1.5em hotpink;
  width: 50vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  background: hsla(180, 100%, 50%, .5);
  mask:
    linear-gradient(red 0 0) padding-box,
    conic-gradient(red var(--p, 17%), transparent 0%) border-box;
}

/* for visual clarity with a semi-transparent background */
body {
  background: url(image-url) 50%/cover;
}</code>

This方法可以有效地建立帶有部分邊框的圓形，並且不受元素背景透明度的影響。

以上是如何使用 HTML5 和 CSS3 建立帶有部分邊框的圓形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！