如何在更改其边框半径时保持 HTML <button> 的背景颜色？答案

【问题标题】：How to maintain background color of HTML <button> while changing it's border radius?如何在更改其边框半径时保持 HTML <button> 的背景颜色？
【发布时间】：2017-07-30 16:37:02
【问题描述】：

在将边框半径应用于按钮时，按钮的背景颜色会发生如下变化：

button{
  height:200px;
  width:500px;
   /*border-radius:10px; */
}

<html>
  <button>My Button</button>
</html>

到这里：

button{
  height:200px;
  width:500px;
  border-radius:10px;
}

<html>
  <button>My Button</button>
</html>

如何在更改边框半径或边框颜色后保持背景颜色。

【问题讨论】：

标签： html css button

【解决方案1】：

将background 设置为linear-gradient。

button{
  height:200px;
  width:500px;
  border-radius:10px; 
  background:linear-gradient(white, #e0e0e0);
}

<html>
  <button>My Button</button>
</html>

【讨论】：