html - 如何在图像周围获得部分圆形边框？-6ren

html - 如何在图像周围获得部分圆形边框？

转载作者：太空宇宙更新时间：2023-11-03 20:25:07

24

4

我想设计以下用于显示个人资料图片。我尝试使用 border-style: dashed，但这不是我想要的；我只想要边框中的三行(破折号)。我怎样才能做到这一点？

这是我尝试过的:

#circle {
    border-radius: 100%;
    width: 100px;
    height: 100px;
    border: 5px dashed;
    background-color: yellow;
}

<!DOCTYPE html>
<html>
<body>
   <div id="circle"></div>
</body>
</html>

我想要的效果:

profile picture

最佳答案

这是一个具有多重背景的想法:

#circle {
  border-radius: 100%;
  width: 100px;
  height: 100px;
  border: 5px solid transparent; /* Control the thickness*/
  background:
    url(https://picsum.photos/id/100/200/200) center/cover content-box,
    
    linear-gradient(blue,blue) top         /100% 20% border-box,
    linear-gradient(blue,blue) bottom left /35%  50% border-box,
    linear-gradient(blue,blue) bottom right/35%  50% border-box;
  background-repeat:no-repeat;
}

<div id="circle"></div>

如果你想在图像和边框之间添加空间，添加一个额外的层:

#circle {
  border-radius: 100%;
  width: 100px;
  height: 100px;
  border: 5px solid transparent; /*Control the thickness*/
  padding:3px; /*control the space*/
  background:
    url(https://picsum.photos/id/100/200/200) center/cover content-box,
    linear-gradient(white,white) padding-box,
    linear-gradient(blue,blue) top         /100% 20% border-box,
    linear-gradient(blue,blue) bottom left /35%  50% border-box,
    linear-gradient(blue,blue) bottom right/35%  50% border-box;
  background-repeat:no-repeat;
}

<div id="circle"></div>

关于html - 如何在图像周围获得部分圆形边框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57871016/

24

4

0

文章推荐： matlab - 在matlab中融合超过2张图像

文章推荐： c# - 检查 decimal 是否指定为 2 dp 或更小

文章推荐： python - SORT Tracker - 参数设置

文章推荐： c# - 关系之间的内部连接

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

html - 如何在图像周围获得部分圆形边框？