Google的新按钮-如何在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;

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

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

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

Answer 1

我认为您处在正确的轨道上，只要将其设置为更大即可，这样您就可以安全地考虑按钮/项目/ div /其他的最大高度。我已经检查了Google Drive的按钮，将其边框半径设置为66px。

注意，我在相同的border-radius属性中设置了4个角，就像示例一样，其中2个是0。边界半径按以下顺序定义：左上，右上，右下，左下。

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

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