如何使用 HTML5 和 CSS3 建立帶有部分邊框的圓形？-css教學-PHP中文網

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

Linda Hamilton

發布： 2024-11-04 00:09:30

原創

979 人瀏覽過

How to Create a Circle with a Partial Border Using HTML5 and CSS3?

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

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

2024 解：

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

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

這是一個 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中文網其他相關文章！