谷歌新式按钮：如何用CSS实现两端圆角效果？

嘿，这个问题问到点子上了！谷歌最近的「两端圆角」设计确实圈了不少粉，而且这种趋势已经开始被广泛效仿。你之前用大像素值（比如500px）的方法其实有点隐患——如果按钮高度很小，超大的圆角会让按钮变成圆形；如果按钮内容换行撑高了，大像素值又可能不够，圆角效果就会显得生硬。

其实有个超简单又完美的解决方案，用超大的固定值或视口相对值来设置border-radius，具体有两种常用写法：

方法一：用足够大的固定值（推荐） #

直接把圆角值设成一个远大于按钮最大可能高度的数值，比如9999px，这样不管按钮高度是多少，两端都会自动呈现半圆效果：

.google-style-btn {
  border-radius: 9999px;
  /* 配套样式示例 */
  padding: 0.5rem 1.25rem;
  border: none;
  background-color: #1a73e8;
  color: #fff;
  font-size: 1rem;
  line-height: 1.5;
}

方法二：用视口相对单位 #

用50vh（视口高度的一半）作为圆角值，同样能实现自适应效果，因为视口高度一般都远大于按钮的高度：

.google-style-btn {
  border-radius: 50vh;
  /* 配套样式同上 */
}

为什么这两种方法好用？ #

• 不管按钮是单行文本还是多行换行，只要高度变化，圆角都会自动适配成两端圆润的效果，既不会出现固定小值（比如10px）的直角感，也不会出现超大固定值在小按钮上变成圆形的问题。
• 现在所有现代浏览器都原生支持border-radius，不需要再加-webkit-或-moz-这类前缀了，代码更简洁。

谷歌的设计其实也是基于类似的思路，并不局限于单行文本——只要用这种自适应的圆角写法，不管按钮内容多长、高度多高，都能完美还原那种两端圆角的风格。

内容的提问来源于stack exchange，提问作者Leon