Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

对此：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

将background设置为 linear-gradient 。

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

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