首页 > web前端 > css教程 > 正文

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

Patricia Arquette
发布: 2024-11-01 08:18:30
原创
928 人浏览过

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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板