边框半径在 CSS 类中不起作用

Question

我正在尝试为按钮添加边框半径，但是当我在下面的 CSS 代码中使用 border-radius: 5px; 时，没有任何反应。其他一切都有效，只是一个关键字不起作用。我读过的所有内容都表明它应该如何工作，但它不在下面的代码中。我不知道我是否只是在下面遗漏了什么？

HTML：

 <button class="button" style="vertical-align:middle"><span>Play</span></button>

CSS：

html {
 height: 100%;
}

body {
 background-image: url("/images/wallpaper.jpg"); 
 background-size: 100% 100%;
 background-repeat: no-repeat;
 height: 100%;
 overflow: hidden; 
}

.heading {
 font-family: Sedgwick Ave Display;
 font-size: 70px;
 color: #cccc00;
}
.subH {
 font-family: Cinzel;
 font-size: 8px;
 position: fixed;
 bottom: 0.05px;
 left: 1190px;
 color: white;
}

.boxhead a {
 color: #FFFFFF;
 text-decoration: none;
}

.button {
  border-radius: 55px;
  position: fixed;
  top: 140px;
  left: 75px;
  font-size: 70px;
  font-family: Sedgwick Ave Display;
  display: inline-block;
  background-color: #cccc00;
  border: none; 
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
 }

.button span {
 cursor: pointer;
 display: inline-block;
 position: relative;
 transition: 0.5s;
}

.button span:after {
 content: '\00bb';
 position: absolute;
 opacity: 0;
 top: 0;
 right: -20px;
 transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
 opacity: 1;
 right: 0;
}

Answer 1

.button { 边框半径：5px； // 这是行不通的

这就是为什么它不起作用：

border-radius: 4px;

...您在同一规则中还有几行，从而覆盖以前的值。