Question

在我的HTML中，表格单元格中有按钮。所有这些按钮都应该通过应用border-radius样式转换为圆形。在我的CSS中，我做了以下

button{
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: gray;
  margin: 1px;
  border: 4px solid black;
}

所有其他样式都应用于按钮，但不应用于border-radius。我可以让它工作的唯一方法是为HTML表分配一个类和一个类。然后在css中使用它 - 就像这样

.board button{
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: gray;
  margin: 1px;
  border: 4px solid black;
}

相关HTML

    <div>
      <table class='board'>
        <tr>
          <td><button type="button"></button></td>
          <td><button type="button"></button></td>
          <td><button type="button"></button></td>
          <td><button type="button"></button></td>
          <td><button type="button"></button></td>
          <td><button type="button"></button></td>
          <td><button type="button"></button></td>
        </tr>
      </table>
    </div>

完整的HTML＆amp; CSS如下

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Connect Four Game</title>
    <link rel="stylesheet" href="practice.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="container">
      <h1>Welcome to Connect Four!</h1>
      <h2>The object of this game is to connect four of your chips in a row!</h2>
      <h3>it is your turn, please pick a column to drop your chip</h3>
    </div>
    <div class="">
      <table class='board'>
        <tr>
          <td><button type="button"></button></td>
          <td><button type="button"></button></td>
          <td><button type="button"></button></td>
          <td><button type="button"></button></td>
          <td><button type="button"></button></td>
          <td><button type="button"></button></td>
          <td><button type="button"></button></td>
        </tr>
      </table>
    </div>
    <script src="practice.js">

    </script>
  </body>
</html>

CSS

h1, h2, h3{
  text-align: center;
}

h1{
  padding-top: 50px;
}

h3{
  padding-bottom: 50px;
}

table{
  border: none;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
}

button{
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: gray;
  margin: 1px;
  border: 4px solid black;
}

结果是

Chrome

Answer 1

由于您发布了其他显示您正在使用Bootstrap的代码，因此我发现了您的问题。

bootstrap使用重置代码

button {
  border-radius: 0;
}

你有几个选择。

大锤方法

button {border-radius: 50%;!important}

这种方法虽然有效会在您想要覆盖时产生不必要的副作用，但您还必须使用!important来维护PITA（未来您将不会使用！重要）

在引导程序之后加载自定义CSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 
<link rel="stylesheet" href="practice.css">

在“按钮”上使用自定义类我的偏好

该类可以像在OP中一样应用于父项或按钮本身如下

使用类是CSS世界的转折点。不要害怕使用它们，它们是你的朋友:) 当你没有使用课程时，你会说使用这个样式表的每个按钮都会有这些规格。但是当您稍后使用提交按钮添加表单并且不添加类时会发生什么 - 您将获得一个100px的圆形按钮

.btn-custom{
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: gray;
  margin: 1px;
  border: 4px solid black;
}

<div>
  <table>
    <tr>
      <td><button type="button" class="btn-custom"></button></td>
      <td><button type="button" class="btn-custom"></button></td>
      <td><button type="button" class="btn-custom"></button></td>
      <td><button type="button" class="btn-custom"></button></td>
      <td><button type="button" class="btn-custom"></button></td>
      <td><button type="button" class="btn-custom"></button></td>
      <td><button type="button" class="btn-custom"></button></td>
    </tr>
  </table>
</div>

旁注：对于旧版浏览器的支持，您可能需要回退

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;

Answer 2

我认为这是一个问题，当你在按钮上应用border-radius时，它不会应用于按钮，因为没有按钮的父级但是，当您将border-radius应用于父类名时，它将％value用于相应的父类您可以通过将border-radius从50％转换为50px来自行尝试。它会完美运作。

Answer 3

您的一个引导样式会覆盖您的半径样式。添加＆＃34;！important＆＃34;在半径之后它起作用。

border-radius：50％！important

border-radius样式不直接应用于按钮，但通过特定类工作

3 个答案: