谷歌的新按钮——如何在 CSS 中做圆尾

Question

您可能已经注意到，Google 正在稍微改变他们的设计理念，并赋予事物“圆润的末端”。看看这张照片，看看我的意思：

爱它或恨它，很多人都会追随潮流。那么在 CSS 中对按钮进行圆角处理的最佳方法是什么？圆形/圆形按钮用

完成

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;

圆角用：

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

但是如何根据谷歌网站将 50% 的圆角应用于任意宽度的多行按钮？

我已经在这个代码笔https://codepen.io/anon/pen/yjdRXB 中使用大像素值完成了它 但是如果内容很大怎么办？还是 Google 只打算在单行文本上使用这种样式？我想用适用于任何字体大小和任何菜单项的值替换我笔中的 500px 值。

对此的任何想法表示赞赏。谢谢！

Answer 1

我认为您在正确的轨道上，只需将其设置为更大，因为它可以让您安全地考虑按钮/项目/div/whatever 的最大高度。我检查了 Google Drive 按钮，它的边框半径设置为 66px。

请注意，我已经在同一个边框半径属性中设置了 4 个角，其中 2 个为 0，就像示例一样。边界半径按以下顺序定义：左上、右上、右下、左下。

.button {
  padding: 10px 30px;
  background: red;
  border: none;
  border-radius: 0 100px 100px 0;
}
  

<button class="button">Hello world</button>