如何使用 CSS 制作圆角边框？答案

【问题标题】：How can I make rounded border with CSS?如何使用 CSS 制作圆角边框？
【发布时间】：2022-12-03 08:07:34
【问题描述】：

我的意思是复选图标外的绿色圆角边框。目前，我的支票周围有整个圆圈，但我真的很困惑如何在左上角引入那个小切口。

这是代码：

<div v-if="verified" class="flex justify-center items-center border-3 border-green rounded-full">
  <svg viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3">
          <path
            d="m10.51 4.525-3.6 3.6-1.65-1.65a.636.636 0 0 0-.9.9l2.1 2.1a.636.636 0 0 0 .9 0l4.05-4.05a.636.636 0 0 0-.9-.9z"
            fill="#fff"
          />
        </svg>
</div>

有 SVG，我正在使用 Tailwind，所以边框类就在 <div> 中。非常感谢任何建议/帮助，谢谢！

【问题讨论】：

您可以寻找：stroke-dasharray 和 stroke-dashoffset 或更酷的使用带有 svg 边框的 css border-image，或者您可以简单地添加一些带有伪元素的内容。我觉得没有对错

标签： html css

【解决方案1】：

你可以这样做：

#circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 5px solid green;
  border-left: 5px solid white;
  transform: rotate(45deg);
}

&lt;div id="circle"&gt;&lt;/div&gt;

如果你想隐藏其他部分，你只需要改变旋转值。

【讨论】：

【解决方案2】：

我添加了一个解决方案，我将如何使用 tailwind 对其进行编码

https://play.tailwindcss.com/OLqtK5HSba

<div class="p-24 flex items-center justify-center">
  <div class="flex relative justify-center items-center w-auto border-[3px] border-green-400 rounded-lg px-8 py-3 
  before:block before:absolute before:-left-[3px] before:-top-[3px] before:w-[calc(50%+3px)] before:h-[calc(50%+3px)] z-10 before:bg-white">
    <span class="relative z-20">Your Button</span>
  </div>
</div>

【讨论】：

不鼓励仅链接答案。如果链接断开，答案将变得无用。此外，我很好的回答解释了目标是如何实现的。