如何使用 CSS 在圆上创建部分边框？

Barbara Streisand

发布： 2024-11-02 12:34:02

原创

328 人浏览过

How to Create a Partial Border on a Circle Using CSS?

使用 HTML5 / CSS3 创建具有部分边框的圆形

是否可以创建一个仅部分延伸的边框的圆形它的周边使用 HTML5 / CSS3？虽然 HTML5 和 CSS3 规范不直接支持这一点，但有一些技术可以实现这种效果。

CSS-Only Method

需要最少 JavaScript 和外部元素涉及操作 CSS 蒙版：

.circular-progress {
  border: 1.5em solid 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
}

登录后复制

此 CSS 创建一个带有粉红色边框和半透明背景的圆形元素。圆锥渐变蒙版覆盖元素的一定百分比，从 12 点钟开始顺时针方向移动。然后在顶部应用线性渐变蒙版，限制在填充框内以创建部分边框效果。

以上是如何使用 CSS 在圆上创建部分边框？的详细内容。更多信息请关注PHP中文网其他相关文章！

来源：php.cn

上一篇：为什么“text-align: center”不适用于 CSS 中的 Colgroup？下一篇：如何在 CSS 中删除下拉列表的边框？

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章