如何仅在链接末尾弯曲链接的边框[重复]

Posted 2023-03-28

【中文标题】如何仅在链接末尾弯曲链接的边框[重复]

【英文标题】：How to bend the border of a link only at the end of the link [duplicate]

【发布时间】：2021-12-19 14:44:57

【问题描述】：

我在 Adob​​e XD 中做了这个设计：[![Button Design][1]][1]

我试着用边框半径让它看起来像这样，但角落表现得很奇怪。

这就是我使用 CSS 时的样子：[![Button CSS][2]][2]

我正在用链接而不是按钮来制作这个按钮！

这是我的 CSS：

.overlay a 
  margin-left: 20px;
  text-decoration: none;
  color: #e4e0e0;
  border: 3px solid #f354f3;
  background-color: #595959;
  color: #f354f3;
  padding: 5px 100px;
  border-radius: 20%;

如果我让边框半径超过 20%，那么整个边框就会开始弯曲。我只希望边框的末端像设计中一样弯曲！

希望有人可以帮助我。谢谢！ [1]：https://i.stack.imgur.com/zLLl1.jpg [2]：https://i.stack.imgur.com/hcPdH.jpg

【问题讨论】：

检查this answer

【参考方案1】：

百分比边框半径取决于高度/宽度（从左到上为高度的 20%；从上到左为宽度的 20%）。

您可以使用非百分比值（如rem 或px）

.something 
  border: 3px solid #f354f3;
  padding: 1rem 2rem;
  border-radius: 1rem;

<div class="something">some text in my element</div>

如果您想拥有完整的边界半径（圆形），您可以将该值设置得非常高。比如：

.something 
  border: 3px solid #f354f3;
  padding: 1rem 2rem;
  border-radius: 9999px;

<div class="something">some text in my element</div>

【讨论】：

@Tibo，实际上你已经很接近了。你不能带着你的样品去吗？