首頁  >  文章  >  web前端  >  2024 年如何僅使用 CSS 建立帶有部分邊框的圓形形狀?

2024 年如何僅使用 CSS 建立帶有部分邊框的圓形形狀?

Patricia Arquette
Patricia Arquette原創
2024-11-01 08:18:30932瀏覽

How to Create Circular Shapes with Partial Borders Using Only CSS in 2024?

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

當負責使用HTML5/CSS3 建立具有部分可見邊框的圓形形狀時,會出現以下問題:它是否是偶數可能的。本文將探討實現此效果的各種技術,並聚焦於 2024 年解決方案。

2024 年解決方案:尖端方法

2024 年解決方案無需 JavaScript、其他元素或偽-元素。它僅依賴 CSS 聲明,即使在半透明背景下也表現得非常好。

這種創新方法涉及雙層掩模:

  • 第1 層(圓錐曲線-漸變蒙版): 此蒙版利用相對於邊框的圓錐梯度,顯示圓的可自訂部分(由--p 控制),從12 點鐘開始按順時針方向。
  • 第 2 層(全覆蓋遮罩): 此遮罩包含填充框內的整個區域,確保邊框牢固地保持在圓的周邊內。

程式碼片段

以下程式碼範例展示了2024 年的解決方案:

<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
}

/* To demonstrate compatibility with semi-transparent backgrounds */
body {
  background: 
    url(https://images.unsplash.com/photo-1693483923875-cdd9ef4a8046?w=800) 
      50%/ cover
}</code>
<code class="html"><div class='circular-progress'></div></code>

使用此CSS 程式碼,您現在可以輕鬆建立帶有部分可見邊框的圓形形狀。 --p 變數提供了控制邊框可見部分的靈活性,使其成為滿足一系列設計需求的多功能解決方案。

以上是2024 年如何僅使用 CSS 建立帶有部分邊框的圓形形狀?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn