css - 无法将半径应用于提交按钮

Question

我正在尝试使我的提交按钮的边框变圆，但是当我尝试这样做时它似乎不起作用:

input[type="submit"].button2,
button[type="submit"].button2{
  border-radius: 12px;
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  border-color: #d21151;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  background-color: #d21151;
  border-radius: 5px;
  letter-spacing: 1px;
  border-width: 1px;
  width: 100px;
  -webkit-transition-duration: 0.4s; 
  transition-duration: 0.4s;
}

Answer 1

您的样式工作正常。这是一个演示片段。

input[type="submit"].button2,
button[type="submit"].button2{

  border-radius: 12px;
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  border-color: #d21151;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  background-color: #d21151; 
  letter-spacing: 1px;
  border-width: 1px;
  width: 100px;
  -webkit-transition-duration: 0.4s; 
  transition-duration: 0.4s;
}

<input type="submit" class="button2" />

<button type="submit" class="button2" >submit</button>

检查元素并查看是否有任何其他外部 CSS 规则应用于它。如果其他规则的优先级高于您的优先级，就会发生这种情况。

---

您在 Internet 上有很多与 CSS 优先级相关的信息，请给自己一些时间来了解这个主题。这里有一些有用的链接 Priority Calculation , Priority Rules