0

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

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

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

我正在使用链接而不是按钮 btw 制作此按钮！

这是我的 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

4

1 回答 1

0

百分比边界半径取决于高度/宽度（从左到上为高度的 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>

于 2021-11-05T14:52:41.477 回答