2024 年如何仅使用 CSS 创建带有部分边框的圆形形状？-css教程-PHP中文网

2024 年如何仅使用 CSS 创建带有部分边框的圆形形状？

Patricia Arquette

发布： 2024-11-01 08:18:30

原创

945 人浏览过

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中文网其他相关文章！