英文:
CSS border with circles in corners
问题
这种边框效果是否可以仅使用CSS创建？
英文:
Is it possible to create this sort of border effect in css only?
答案1
得分: 1
以下是您提供的内容的中文翻译：
.box {
--b: 5px; /* 边框厚度 */
width: 200px;
aspect-ratio: 1;
margin: 20px;
border-image:
radial-gradient(#000 50%,#fff 52% 71%,#0000 72%)
100%/40px/18px;
background:
conic-gradient(from 90deg at var(--b) var(--b),#0000 25%,#000 0)
0 0/calc(100% - var(--b)) calc(100% - var(--b))
}
<div class="box"></div>
英文:
A quick solution using border-image (for the circles) and conic-gradient (for the border)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.box {
--b: 5px; /* border thickness */
width: 200px;
aspect-ratio: 1;
margin: 20px;
border-image:
radial-gradient(#000 50%,#fff 52% 71%,#0000 72%)
100%/40px/18px;
background:
conic-gradient(from 90deg at var(--b) var(--b),#0000 25%,#000 0)
0 0/calc(100% - var(--b)) calc(100% - var(--b))
}
<!-- language: lang-html -->
<div class="box"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论